Question

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脚本打开一个弹出窗口，我想知道弹出窗口是如何打开的。

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

Answer 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 因为它有光的id。然后它会将显示设置为阻止，因为默认情况下它是隐藏的。它还会显示背景覆盖以将其黑化。这都是使用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>

Answer 2

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

显示“光”＆amp;单击“登录”按钮时“淡化”元素：

<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'">

jquery如何帮助打开一个弹出窗口？

2 个答案: