jquery 将如何帮助打开弹出窗口？答案

【问题标题】：how the jquery will be helpful to open a popup window?jquery 将如何帮助打开弹出窗口？
【发布时间】：2011-11-04 14:09:16
【问题描述】：

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脚本打开了一个弹窗，我想知道弹窗是怎么打开的。

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

【问题讨论】：

标签： jquery

【解决方案1】：

它来自 onclick 值。但这确实是糟糕的代码。您的 html 中有 javascript，这对于各种情况都不好。您应该尽可能将样式、代码和内容分开。

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

基本上就在这里，它会找到 div 因为它有一个光的标识。然后它将显示设置为阻止，因为默认情况下它是隐藏的。它还将显示背景覆盖以将其涂黑。这一切都是使用 css 完成的。请注意 id 为 light 的 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>

【讨论】：

【解决方案2】：

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

点击“登录”按钮时显示“灯光”和“淡出”元素：

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

点击关闭图片时隐藏“light”和“fade”元素：

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

【讨论】：