jQuery实现弹窗居中效果类似alert()


Posted in Javascript onFebruary 27, 2017

效果图如下所示:

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(),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
document.all的一个比较完整的总结及案例
Jan 31 Javascript
jQuery不兼容input的change事件问题解决过程
Dec 05 Javascript
JavaScript检查数字是否为整数或浮点数的方法
Jun 09 Javascript
jQuery实现的仿select功能代码
Aug 19 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
关于Jquery中的事件绑定总结
Oct 26 Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 Javascript
详解vue中移动端自适应方案
May 05 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
JavaScript进阶(一)变量声明提升实例分析
May 09 Javascript
微信小程序反编译的实现
Dec 10 Javascript
react中hook介绍以及使用教程
Dec 11 Javascript
js实现简单的手风琴效果
Feb 27 #Javascript
jquery实现弹窗功能(窗口居中显示)
Feb 27 #Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 #Javascript
jQuery实现简单弹窗遮罩效果
Feb 27 #Javascript
js 调用百度分享功能
Feb 27 #Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 #Javascript
jQuery实现元素的插入
Feb 27 #Javascript
You might like
zf框架db类的分页示例分享
2014/03/14 PHP
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
有关于eclipse配置spket需要注意的一些地方
2013/04/07 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
Vue页面跳转动画效果的实现方法
2018/09/23 Javascript
对angularJs中$sce服务安全显示html文本的实例
2018/09/30 Javascript
vue项目刷新当前页面的三种方法
2018/12/04 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
2020/04/01 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
Sanic框架路由用法实例分析
2018/07/16 Python
python实现单链表中删除倒数第K个节点的方法
2018/09/28 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
详解利用Python scipy.signal.filtfilt() 实现信号滤波
2019/06/05 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
python目标检测给图画框,bbox画到图上并保存案例
2020/03/10 Python
python实现经纬度采样的示例代码
2020/12/10 Python
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
C#软件工程师英语面试题
2015/06/07 面试题
结婚邀请函范文
2014/01/14 职场文书
优秀公益广告词大全
2014/03/19 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
详解分布式系统中如何用python实现Paxos
2021/05/18 Python
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis