jquery实现弹窗功能(窗口居中显示)


Posted in Javascript onFebruary 27, 2017

效果图:

jquery实现弹窗功能(窗口居中显示)

代码如下:

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js中精确计算加法和减法示例
Mar 28 Javascript
vue.js中$watch的用法示例
Oct 04 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
详解vue静态资源打包中的坑与解决方案
Feb 05 Javascript
VUE重点问题总结
Mar 19 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 Javascript
vue-router beforeEach跳转路由验证用户登录状态
Dec 26 Javascript
浅谈JavaScript面向对象--继承
Mar 20 Javascript
JS实现简易留言板特效
Dec 23 Javascript
详解js创建对象的几种方式和对象方法
Mar 01 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
jQuery实现导航回弹效果
Feb 27 #Javascript
使用jQuery操作DOM的方法小结
Feb 27 #Javascript
You might like
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
addEventListener 的用法示例介绍
2014/05/07 Javascript
js实例属性和原型属性示例详解
2014/11/23 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
2015/08/10 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
2016/11/22 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
浅谈redux以及react-redux简单实现
2018/08/28 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
前端性能优化建议
2020/09/17 Javascript
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
Python笔试面试题小结
2019/09/07 Python
Python字符串三种格式化输出
2020/09/17 Python
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
销售类个人求职信范文
2013/09/25 职场文书
初中物理教学反思
2014/01/14 职场文书
班级课外活动总结
2014/07/09 职场文书
整改落实自查报告
2014/11/05 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
导游词之贵州百里杜鹃
2019/10/29 职场文书
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript
Redis命令处理过程源码解析
2022/02/12 Redis