因为公司做的网站要用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>
