jquery实现弹窗功能（窗口居中显示）

时间：2021-05-26

效果图：

代码如下：

<!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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章