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 相关文章推荐
让回调函数 showResponse 也带上参数的代码
Aug 13 Javascript
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
解决jquery版本冲突的有效方法
Sep 02 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
Dec 23 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
分析JS单线程异步io回调的特性
Dec 01 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
Angular ElementRef简介及其使用
Oct 01 Javascript
JS工厂模式开发实践案例分析
Oct 17 Javascript
js实现简单的日历显示效果函数示例
Nov 25 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
php+mysql分页代码详解
2008/03/27 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
JS的数组的扩展实例代码
2008/07/09 Javascript
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
jQuery层次选择器用法示例
2016/09/09 Javascript
jQuery的Read()方法代替原生JS详解
2016/11/08 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
JavaScript正则表达式和级联效果
2017/09/14 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
JavaScript中import用法总结
2019/01/20 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
[03:48]大碗DOTA
2019/07/25 DOTA
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
python使用turtle绘制分形树
2018/06/22 Python
python操作excel文件并输出txt文件的实例
2018/07/10 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
python基于openpyxl生成excel文件
2020/12/23 Python
毕业生求职简历中的自我评价
2013/10/18 职场文书
老公婚前保证书
2015/02/28 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
退伍军人感言
2015/08/01 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS