因为公司做的网站要用jquery来做前台交互,所以就自学了jquery这个框架,下面是一个弹出层的代码,给大家分享下
<%@ Page Language="C#" validateRequest="false" %>
<%@ Register assembly="FredCK.FCKeditorV2" namespace="FredCK.FCKeditorV2" tagprefix="FCKeditorV2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>jQuery 弹出层测试版 </title>
<script type="text/javascript" src="scripts/jquery-1.4.1-vsdoc.js"></script>
<style type="text/css">
#dialog-overlay{width:100%;height:100%;background:#000;position:absolute;top:0;left:0;z-index:4000;display:none;filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6}
#dialog-box{display:none;background:#f7f7f7;width:328px;position:absolute;z-index:5000}
.dialog-content{padding:10px;margin:13px;color:#666;text-align:center}
#close{margin:10px auto 0 auto;text-align:center;background-color: #e33100;display: block;width:50px;padding: 5px 10px 6px;color: #fff}
</style>
</head>
<body>
<div id="dialog-overlay"></div>
<div id="dialog-box">
<div class="dialog-content">
<div id="dialog-message">
//你的内容
<input type="checkbox" value="tt" />
<input type="text" value="a" />
<input type="text" value="a" />
<input type="text" value="a" />
</div>
<a href="javascript:void(0);" id="close">关闭</a>
</div>
</div>
<input type="button" id="box" value="tt"/>
<script type="text/javascript">
function popup() { //弹出层主代码
var maskHeight = $(document).height();
var maskWidth = $(window).width();
var dialogTop = $(window).scrollTop() + ($('#dialog-box').height() / 3);
var dialogLeft = (maskWidth / 2) - ($('#dialog-box').width() / 2);
$('#dialog-overlay').css({ height: maskHeight, width: maskWidth }).show();
$('#dialog-box').css({ top: dialogTop, left: dialogLeft }).show();
}
$(function () {
$('#close,#dialog-overlay').click(function () { $('#dialog-overlay,#dialog-box').hide(); }); //隐藏弹出层
$(window).resize(function () { if (!$('#dialog-box').is(':hidden')) popup(); }); //窗口大小改变时改变弹出层的位置
$('#box').click(function () { popup(); }); //单击时触发弹出层事件
})
</script>
</body>
</html>