首页 > 代码库 > 简单弹窗
简单弹窗
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>弹窗测试</title> 6 <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> 7 </head> 8 9 <body>10 <script type="text/javascript" language="javascript">11 $(document).ready(function () {12 //$("#btn_center").click(function () {13 // hcOpenwin();14 //});15 }); 16 </script>17 <div style="width:600px;margin-left:auto;margin-right:auto;margin-top:160px;">18 <input type="button" value="居中窗口" id="btn_center" onclick="hcOpenwin()" />19 </div>20 <style type="text/css"> 21 .hcw_window{ width:300px; background-color:#FFAD41; position:absolute; 22 padding:2px; margin:5px; display:none; z-index:999; } 23 .hcw_content{ height:368px; background-color:#FFECA7; font-size:14px; 24 overflow:auto; } 25 .hcw_title{ padding:0 0 2px 2px; color:#FFF; font-size:14px;26 font-weight:bolder; } 27 .hcw_title img{ float:right; } 28 </style>29 <div class="hcw_window" id="hcwin0">30 <div id="hcw_title" class="hcw_title"><img src="http://image.mamicode.com/info/201409/20181006091528068600.jpg" alt="关闭" />注册抢购</div>31 <div class="hcw_content"> 弹窗测试 </div>32 </div>33 <script type="text/javascript">34 //data{id:windowid,pre:classpre,relattop:relattop,relatleft:relatleft}35 function hcOpenwin(data){36 var windowHeight = $(window).height(); 37 var windowWidth = $(window).width();38 if(typeof(data)!=‘object‘) var data = new Object();39 if(!data.id) data.id = ‘hcwin0‘;40 var popWidth = $("#"+data.id).width();41 var popHeight = $("#"+data.id).height();42 var popY=(windowHeight-popHeight)/2;43 var popX=(windowWidth-popWidth)/2;44 if(!data.pre) data.pre = ‘hcw_‘;45 $("#"+data.id).css("top",popY).css("left",popX).css("display","block");46 $("#"+data.pre+"title img").click(function(){ 47 $(this).parent().parent().css("display","none"); 48 });49 }50 </script>51 </body>52 </html>
简单弹窗
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。