jQuery实现弹窗居中效果类似alert()
更新时间:2017年02月27日 16:15:12 作者:yangzailu1990
本文给大家分享基于jquery实现弹窗居中效果类似于alert(),代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下
效果图如下所示:
废话不多说了,直接给大家贴代码了,具体代码如下所示:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>弹出确认框始终位于窗口的中间位置的测试</title> <style type="text/css"> .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.5; filter: alpha(opacity=50); display: none; z-index: 99; } .mess { position: absolute; display: none; width: 250px; height: 100px; border: 1px solid #ccc; background: #ececec; text-align: center; z-index: 101; } </style> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.btn').click(function() { $('.mask').css({'display': 'block'}); center($('.mess')); check($(this).parent(), $('.btn1'), $('.btn2')); }); // 居中 function center(obj) { var screenWidth = $(window).width(); screenHeight = $(window).height(); //当前浏览器窗口的 宽高 var scrolltop = $(document).scrollTop();//获取当前窗口距离页面顶部高度 var objLeft = (screenWidth - obj.width())/2 ; var objTop = (screenHeight - obj.height())/2 + scrolltop; obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'}); //浏览器窗口大小改变时 $(window).resize(function() { screenWidth = $(window).width(); screenHeight = $(window).height(); scrolltop = $(document).scrollTop(); objLeft = (screenWidth - obj.width())/2 ; objTop = (screenHeight - obj.height())/2 + scrolltop; obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'}); }); //浏览器有滚动条时的操作、 $(window).scroll(function() { screenWidth = $(window).width(); screenHeight = $(widow).height(); scrolltop = $(document).scrollTop(); objLeft = (screenWidth - obj.width())/2 ; objTop = (screenHeight - obj.height())/2 + scrolltop; obj.css({left: objLeft + 'px', top: objTop + 'px','display': 'block'}); }); } //确定取消的操作 function check(obj, obj1, obj2) { obj1.click(function() { obj.remove(); closed($('.mask'), $('.mess')); }); obj2.click(function() { closed($('.mask'), $('.mess')); }) ; } // 隐藏 的操作 function closed(obj1, obj2) { obj1.hide(); obj2.hide(); } }); </script> </head> <body> <input type="button" class="btn" value="btn"/> <div>弹出确认框始终位于窗口的中间位置的测试</div> <div class="mask"></div> <div class="mess"> <p>确定要删除吗?</p> <p><input type="button" value="确定" class="btn1"/> <input type="button" value="取消"class="btn2"/></p> </div> </body> </html>
以上所述是小编给大家介绍的jQuery实现弹窗居中效果类似alert(),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
jQuery Easyui datagrid editor为combobox时指定数据源实例
当在datagrid行内部应用添加编辑操作时,引入combobox是非常方便的操作,这篇文章主要介绍了jQuery Easyui datagrid editor为combobox时指定数据源实例,有兴趣的可以了解一下。2016-12-12使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
基于jQuery的扫码枪监听。如果只是想实现监听获取条码扫码信息,可以直接拿来使用,如果有更多的条码判断处理逻辑需要自己扩展哦2017-03-03LazyForm jQuery plugin 定制您的CheckBox Radio和Select
LazyForm jQuery plugin 定制您的CheckBox Radio和Select ,需要的朋友可以参考下。2009-10-10jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
这篇文章主要介绍了jQuery插件HighCharts绘制的2D堆柱状图效果,结合完整实例形式分析了jQuery插件HighCharts绘制2D柱状图的实现技巧与相关注意事项,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-03-03jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
这篇文章主要介绍了jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法,实例分析了jquery.nicescroll插件实现图片拖拽效果的方法,需要的朋友可以参考下2015-08-08
最新评论