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 相关文章推荐
JavaScript入门教程(12) js对象化编程
Jan 31 Javascript
JQuery SELECT单选模拟jQuery.select.js
Nov 12 Javascript
JavaScript日历实现代码
Sep 12 Javascript
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
jQuery操作cookie方法实例教程
Nov 25 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 Javascript
微信小程序 页面跳转传递值几种方法详解
Jan 12 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
Apr 08 Javascript
Angularjs之ngModel中的值验证绑定方法
Sep 13 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 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 api函数实现数组的交换排序示例
2014/04/13 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
PHP使用OB缓存实现静态化功能示例
2019/03/23 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
2015/08/06 Javascript
Jquery实现弹性滑块滑动选择数值插件
2015/08/08 Javascript
jQuery解析Json实例详解
2015/11/24 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
AngularJS中的按需加载ocLazyLoad示例
2017/01/11 Javascript
简单实现js菜单栏切换效果
2017/03/04 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
js实现中文实时时钟
2020/01/15 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
Python3遍历目录树实现方法
2015/05/22 Python
Python单体模式的几种常见实现方法详解
2017/07/28 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
详解Python字符串切片
2019/05/20 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
提升python处理速度原理及方法实例
2019/12/25 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
html5默认气泡修改的代码详解
2020/03/13 HTML / CSS
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
python 如何在list中找Topk的数值和索引
2021/05/20 Python
mysql脏页是什么
2021/07/26 MySQL
Ajax实现异步加载数据
2021/11/17 Javascript
详解TypeScript的基础类型
2022/02/18 Javascript