2011-11-04 67 views
0

代码jQuery的弹出窗口和富文本编辑器...jquery如何帮助打开一个弹出窗口?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>LIGHTBOX EXAMPLE</title> 
<SCRIPT> 
function clearDefaultandCSS(el) { 
if (el.defaultValue==el.value) el.value = "" 
// If Dynamic Style is supported, clear the style 
if (el.style) el.style.cssText = "" 
} 
</SCRIPT> 
<style> 
.black_overlay{ 
display: none; 
position: absolute; 
top: 0%; 
left: 0%; 
width: 100%; 
height: 100%; 
background-color:#9A9A9C; 
z-index:1001; 
-moz-opacity: 0.8; 
opacity:.80; 
filter: alpha(opacity=80); 
} 
.white_content { 
display: none; 
position: absolute; 
top: 25%; 
left: 25%; 
width: 30%; 
height: 40%; 
background-color: #FFF; 
z-index:1200; 
overflow: auto; 
border-radius: 10px; 
ms-border-radius: 10px; 
right: 25%; 
bottom: 25%; 
padding: 25px; 
} 
.button { 
display: inline-block; 
min-width: 54px; 
text-align: center; 
color: #555; 
font-size: 11px; 
font-weight: bold; 
height: 27px; 
padding: 0 8px; 
line-height: 27px; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
-webkit-transition: all 0.218s; 
-moz-transition: all 0.218s; 
-ms-transition: all 0.218s; 
-o-transition: all 0.218s; 
transition: all 0.218s; 
border: 1px solid gainsboro; 
border: 1px solid rgba(0, 0, 0, 0.1); 
background-color: whiteSmoke; 
background-image: -webkit-gradient(linear,left top,left    bottom,from(#f5f5f5),to(#f1f1f1)); 
background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1); 
background-image: -moz-linear-gradient(top,#f5f5f5,#f1f1f1); 
background-image: -ms-linear-gradient(top,#f5f5f5,#f1f1f1); 
background-image: -o-linear-gradient(top,#f5f5f5,#f1f1f1); 
background-image: linear-gradient(top,#f5f5f5,#f1f1f1); 
-webkit-user-select: none; 
-moz-user-select: none; 
user-select: none; 
cursor: default; 

} 
</style> 
</head> 
<body style="overflow:hidden"> 
<a href = javascript:void(0) onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Login</a> 
<div id="light" class="white_content" style="overflow:hidden"> 
<div align="justify"> 
<img align="right" src='file:///C|/Users/vptr/Desktop/close.png' onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"> 
</div> 
<p align="left" style="color:#006633; font: Arial, Helvetica, sans-serif, Arial, Helvetica, sans-serif; font-size: xx-large">Log In to <span style="color:#000">Grill</span></p> 

<table> 
<form action="" method="get"> 
<tr> <td colspan="2"><input TYPE="text" 
placeholder="Email/Username" 
style="height:30px; width:200px; color:#0CF" 
ONFOCUS="clearDefaultandCSS(this)"></td> </tr><br> 
<tr> <td colspan="2"><input type="password" 
placeholder="password" 
style="height:30px; width:200px; color:#063"s 
TITLE="password" 
ONFOCUS="clearDefaultandCSS(this)"></td></tr> 
<tr><td><input type="submit" class="button" value="Login"></td><td><p><a href="#"><span style="color:#033">Forgot password</a></p></td></tr> 
</span></form> 
</table> 
<div align="center" ><p>Create an <a href= ><span style="color:#033">Account</span></a>    <p></div> 
</div> 
<div id="fade" class="black_overlay"></div> 
</body> 
</html> 

上面的代码是非常有用的创建使用jQuery日志在弹出的窗口。

这里我用java脚本打开一个弹出窗口,我想知道如何在弹出窗口被打开。

,并使用相同的脚本如何打开另一个弹出当我点击忘记密码。

回答

0

它来自的onclick值。但这是非常糟糕的代码。你的html里面有javascript,对于各种不好的。如果可能,你应该保持样式,代码和内容分开。

<a href = javascript:void(0) onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Login</a> 

基本上这里这个权利,它会发现DIV 因为它具有光的ID。然后它会将显示设置为阻止,因为默认情况下它是隐藏的。它还会显示一个覆盖背景的黑色区域。这一切都使用CSS完成。请注意,id与id的div具有类white_content。这是它的样式。

坦率地说,如果你有jQuery和想使用它,那么为什么不使用它。这只是直线上的CSS和JavaScript,没有jQuery在这里。你也可以下载这种类型的东西的许多插件。

看看http://fancybox.net/,这将让你的代码从HTML易于分离。

如果你想保持这个代码来创建一个又一个简单的做这样的事情:

<a href = javascript:void(0) onclick = "document.getElementById('newpopup').style.display='block';document.getElementById('fade').style.display='block'">New Popup</a> 

<div id="newpopup" class="white_content" style="overflow:hidden">

Anything you want in here

</div>

0

首先,这个标记没有jQuery中。

<a href=javascript:void(0) 
    onclick="document.getElementById('light').style.display='block'; 
      document.getElementById('fade') .style.display='block'">Login</a>` 

隐藏 “轻” 和近距离图像点击 “变脸” 的元素:

秀 “光” & “变脸” 中的 “登录” 按钮的点击元素

<img align="right" src='file:///C|/Users/vptr/Desktop/close.png' onclick="document.getElementById('light').style.display='none'; document.getElementById('fade') .style.display='none'"> 
相关问题