jquery实现弹出层效果实例
本文实例讲述了jquery实现弹出层效果的方法。分享给大家供大家参考。具体实现方法如下:
<headrunat="server"> <title>jQuery弹出层</title> <scripttype="text/javascript"src="js/jquery-1.3.2-min.js"></script> <scripttype="text/javascript"> $(function(){ $("#btnShow").click(function(){ //varstr="我是弹出对话框"; //$(".form").html(str); $("#BgDiv").css({display:"block",height:$(document).height()}); varyscroll=document.documentElement.scrollTop; $("#DialogDiv").css("top","100px"); $("#DialogDiv").css("display","block"); document.documentElement.scrollTop=0; }); $("#btnClose").click(function(){ $("#BgDiv").css("display","none"); $("#DialogDiv").css("display","none"); }); }); </script> <styletype="text/css"> body,h2 { margin:0; padding:0; } #BgDiv { background-color:#e3e3e3; position:absolute; z-index:99; left:0; top:0; display:none; width:100%; height:1000px; opacity:0.5; filter:alpha(opacity=50); -moz-opacity:0.5; } #DialogDiv { position:absolute; width:400px; left:50%; top:50%; margin-left:-200px; height:auto; z-index:100; background-color:#fff; border:1px#8FA4F5solid; padding:1px; } #DialogDivh2 { height:25px; font-size:14px; background-color:#8FA4F5; position:relative; padding-left:10px; line-height:25px; } #DialogDivh2a { position:absolute; right:5px; font-size:12px; color:#000000; } #DialogDiv.form { padding:10px; } </style> </head> <body> <formid="form1"runat="server"> <divid="BgDiv"></div> <divid="DialogDiv"style="display:none"> <h2> 弹出层<ahref="#"id="btnClose">关闭</a></h2> <divclass="form"> 我是弹出对话框!!<br/> 我是弹出对话框!!<br/> 我是弹出对话框!!<br/> 我是弹出对话框!!<br/> 我是弹出对话框!!<br/> 我是弹出对话框!!<br/> 我是弹出对话框!!<br/> </div> </div> <p> </p> <palign="center"> <inputvalue="弹出"class="but"type="button"id="btnShow"/> </p> </form> </body> </html>
希望本文所述对大家的jQuery程序设计有所帮助。