弹出层页面
弹出层页面
Html代码1.弹出层的一个小例子
2.
3.
4.<head>
5.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6.<title>jquery弹出层实例</title>
7.<script type="text/javascript" src="jquery-1.6.4.js"></script>
8.<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
9.<script type="text/javascript">
10.
11.$(function()
12.{
13. $("#btnShow").click(function()
14. {
15. var str="我是弹出对话框";
16. $(".form").html(str);
17. $("#BgDiv").css({ display:"block",height:$(document).height()});
18. var yscroll=document.documentElement.scrollTop;
19. $("#DialogDiv").css("top","100px");
20. $("#DialogDiv").css("display","block");
21. document.documentElement.scrollTop=0;
22. });
23. $("#btnClose").click(function()
24. {
25. $("#BgDiv").css("display","none");
26. $("#DialogDiv").css("display","none");
27. });
28.});
29.</script>
30.<style type="text/css">
31.body,h2{margin:0 ; padding:0;}
32.#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;}
33.#DialogDiv{position:absolute;width:400px; left:50%; top:50%; margin-left:-200px; height:auto; z-index:100;background-color:#fff; border:1px #8FA4F5 solid; padding:1px;}
34.#DialogDiv h2{ height:25px; font-size:14px; background-color:#8FA4F5; position:relative; padding-left:10px; line-height:25px;}
35.#DialogDiv h2 a{position:absolute; right:5px; font-size:12px; color:#000000}
36.#DialogDiv .form{padding:10px;}
37.</style>
38.</head>
39.
40.<body >
41.
42.<div id="BgDiv"></div>
43.<div id="DialogDiv" style="display:none">
44.<h2>弹出层<a href="#" id="btnClose">关闭</a></h2>
45. <div class="form">
46. 我是弹出对话框！！
47. </div>
48.</div>
49.
50.<p> </p>
51.<p align="center">
52.<input value="弹出" class="but" type="button" id="btnShow" />
53.</p>
54.</body>
55.</html> 学习鸟 谢谢分享
页:
[1]