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 相关文章推荐
JS日历 推荐
Dec 03 Javascript
Javascript 的addEventListener()及attachEvent()区别分析
May 21 Javascript
jquery下实现overlay遮罩层代码
Aug 25 Javascript
javascript笔记 String类replace函数的一些事
Sep 22 Javascript
js中的getAttribute方法使用示例
Aug 01 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
Jun 08 Javascript
如何基于JS截获动态代码
Dec 25 Javascript
vue基于better-scroll实现左右联动滑动页面
Jun 30 Javascript
JS出现404错误原理及解决方案
Jul 01 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实现模仿socket请求返回页面的方法
2014/11/04 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
JQuery下的Live方法和$.browser方法使用代码
2010/06/02 Javascript
纯JS实现的批量图片预览加载功能
2011/08/14 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
JS定时关闭窗口的实例
2013/05/22 Javascript
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
利用JavaScript判断浏览器类型及版本
2016/08/23 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
spirngmvc js传递复杂json参数到controller的实例
2018/03/29 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
node 标准输入流和输出流代码实例
2019/09/19 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
python验证码识别的实例详解
2016/09/09 Python
python 简单的绘图工具turtle使用详解
2017/06/21 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
Numpy之random函数使用学习
2019/01/29 Python
Python实现DDos攻击实例详解
2019/02/02 Python
PyQt实现计数器的方法示例
2021/01/18 Python
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
PyQt 如何创建自定义QWidget
2021/03/24 Python
高中军训感言800字
2014/03/05 职场文书
公司联欢会主持词
2015/07/04 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
关于python爬虫应用urllib库作用分析
2021/09/04 Python
React Fragment介绍与使用详解
2021/11/11 Javascript