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 相关文章推荐
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 Javascript
Javascript:为input设置readOnly属性(示例讲解)
Dec 25 Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 Javascript
一个不错的字符串转码解码函数(自写)
Jul 31 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
详解vue-cli 脚手架项目-package.json
Jul 04 Javascript
webpack多入口多出口的实现方法
Aug 17 Javascript
JS跨域请求的问题解析
Dec 03 Javascript
详解Angular Karma测试的持续集成实践
Nov 15 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
PHP4 与 MySQL 交互使用
2006/10/09 PHP
php中10个不同等级压缩优化图片操作示例
2016/11/14 PHP
PHP数据库操作三:redis用法分析
2017/08/16 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
jQuery新闻滚动插件 jquery.roller.js
2011/06/27 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场!
2019/07/20 DOTA
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
python中requests库session对象的妙用详解
2017/10/30 Python
Python实现KNN邻近算法
2021/01/28 Python
python实现媒体播放器功能
2018/02/11 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
python进行TCP端口扫描的实现
2018/12/21 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
Sephora丝芙兰印尼官方网站:购买化妆品和护肤品
2018/07/02 全球购物
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
连锁经营管理专业大学生求职信
2013/10/30 职场文书
酒吧副总经理岗位职责
2013/12/10 职场文书
学校对教师的评语
2014/04/28 职场文书
优秀教师演讲稿
2014/05/06 职场文书
医学求职自荐信
2014/06/21 职场文书
大学教师个人总结
2015/02/10 职场文书
酒店员工辞职信范文
2015/02/28 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers