div弹出层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>LIGHTBOX EXAMPLE</title> <style> .white_content { display: none; position:fixed; <!--这样就可以随着鼠标 动了--> top: 25%; left: 25%; 50%; border: 12px solid #D6E9F1; z-index: 1002; } .black_overlay { display: none; position:fixed; top: 0%; left: 0%; 100%; height: 100%; background-color: #f5f5f5; z-index: 1001; -moz-opacity: 0.4; opacity: .80; filter: alpha(opacity=80); } .close { float: right; clear: both; 100%; text-align: right; margin: 0 0 6px 0; } .close a { color: #333; text-decoration: none; font-size: 14px; font-weight: 700; } .con { text-indent: 1.5pc; line-height: 21px; } </style> <script type="text/javascript"> function show(tag) { var light = document.getElementById(tag); var fade = document.getElementById('fade'); light.style.display = 'block'; fade.style.display = 'block'; } function hide(tag) { var light = document.getElementById(tag); var fade = document.getElementById('fade'); light.style.display = 'none'; fade.style.display = 'none'; //也可以这样删除 div // $('#fade').remove(); } </script> </head> <body> <a href="javascript:void(0)" onclick="show('light')">打开</a> <div id="light" class="white_content"> <div class="close"> <a href="javascript:void(0)" onclick="hide('light')">关闭</a></div> <div> 这里是弹出div 要显示的内容 </div> </div> <div id="fade" class="black_overlay"> 这个div相当于一个黑布，把不想显示的 遮去，好显示弹出的div </div> </body> </html>
2.留言系统，当验证后 用户没有登录，弹出登录层 ，登录完 ，登录层 消失
//查看是否登录
function CheckLogin() {
var txt = document.getElementById("txt");
if (txt.value == '有什么想对他说的请在此留言！') txt.value = '';
try {
$.ajax({
type: "POST",
url: "/hall/IsLogin",
async: false,
success: function(msg) {
if (msg.toLowerCase() == "false") {
//no login to login
LoadLoginPage();
}
}
});
}
catch (e) { }
}
//加载登录页面
function LoadLoginPage() {
try {
$.ajax({
type: "Get",
url: "/hall/ToLogin",
async: false,
success: function(msg) {
//留言页面的 body id是su_body,把登录页面 加载到 body里
$('#su_body').append(msg);
}
});
}
catch (e) { }
}
//传入obj div的id ，隐藏div
function ColseLoginDiv(obj) {
//删除登录div
$('#login').remove();
}
登录页面 和上面 静态页的 原理一样，
<div id="login">
<div id="tologin" class="white_content">
<div class="close">
<a href="javascript:void(0)" onclick="ColseLoginDiv('tologin')">关闭</a></div>
<%using (Html.BeginForm())
{
%>
<input id="login" class="denglu_button" type="submit" value="登陆" />
</td>
<td>
<input id="Submit1" class="denglu_button" type="button" value="取消" onclick="ColseLoginDiv('tologin')" />
<%
} %>
</div>
<div id="fade" class="black_overlay">用来遮盖
</div>
</div>