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()的更多相关文章
- Jquery打造的类似新浪微博@提醒功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Jquery弹窗组件
下面是写的简单的Jquery弹窗组件 暂不支持animate,只能满足一般的弹窗显示隐藏需求,更多功能后续会完善!网上及jquery组件很多这样的弹窗,但是用别人的感觉心里过不去,所以就随便写写,当做 ...
- jquery 弹窗插件 layer
jquery 弹窗插件 layer 官网:http://sentsin.com/jquery/layer/ 1 <!DOCTYPE html PUBLIC "-//W3C//DTD H ...
- jquery层居中,点击小图查看大图,弹出层居中代码，顶部层固定不动，滚动条滚动情况
jquery层居中,点击小图查看大图,弹出层居中代码 http://www.cnblogs.com/simpledev/p/3566280.html 见第一版,发现一个情况,如果页面内容多出一屏的情况 ...
- 实现js的类似alert效果的函数
这个简单的类似alert的函数,效果还行,至于css样式,那没的说了,笔者确实尽力了,如果读者觉得太烂,你可以随便改函数的样式的,反正,笔者觉得还可以,呵呵. <!DOCTYPE html PU ...
- js实现弹窗居中
在一些页面中,我们总会遇到一些弹窗不居中的时候,还要根据浏览器的大小来调整弹窗的弹出位置, 之前我也遇到这样的问题,现在我把我知道的呈现给大家 css样式 .windowBox{ width:500p ...
- [转]jQuery插件实现模拟alert和confirm
本文转自:http://www.jb51.net/article/54577.htm (function () { $.MsgBox = { Alert: function (title, msg) ...
- 自编jQuery插件实现模拟alert和confirm
现在绝大多数网站都不用自带的alert和confirm了,因为界面太生硬了.因此这个插件就这样产生了自己定制一个的想法...... 啥也不说,先上图,有图有真相 :) 现在绝大多数网站都不用自带的al ...
- jquery左右链接类似frameset的插件
一般在使用jquery的扩展的 ui方面的插件, 都要注意链接两个文件 一个是ui 相关的js文件 另一个是 ui相关的 css文件! 参考这个css布局 通常多个平行的items 都是用ul li来 ...
随机推荐
- docker部署生产环境下的tomcat
1. dockerfile文件 FROM tomcat:7-jre8 WORKDIR /etc COPY ./Shanghai /etc/localtime WORKDIR /usr/share/zo ...
- Python3之文本操作
文件操作示例分析: 文件操作一般要经历三个步骤: 打开文件 操作文件 关闭文件 读取操作示例: >>>f = open('test.txt', 'r') # 打开文件test.txt ...
- B: Break Prime
题目描述 给定一个素数,试判断能否将该素数写为b3−a3 的形式,a,b皆为非负整数. 输入 多组输入 每行一个素数P (2≤P≤1015) 输出 若可以分解输出a,b(a<b) ,不能输出 ...
- FreeRTOS-06任务运行时间信息统计
根据正点原子FreeRTOS视频整理 单片机:STM32F207VC FreeRTOS源码版本:v10.0.1 * 1. 要使用vTaskGetRunTimeStats()函数,需满足以下条件: * ...
- python自动化 协程函数、二分查找、模块搜索
协程函数 yiled: 把函数的执行结果封装好__iter__和__next__得到一个迭代器 与return功能类似,都可以返回值,但是return只能返回一次只 def fun(count): p ...
- thinkphp5.0升级
之前一些项目是thinkphp5.0的版本.这个版本是有严重漏洞的.根据官方建议会把Request.php下面的 method方法做一个替换.但是实际上为了安全最好是做一个升级.首先必须要先做一个备份 ...
- django Form数据读取问题
1.在我学习django的过程中,我学习到了一个关于表单验证的问题 2.我们从前端post一个表单,通过urls配置,传给对应的view方法 3.然后再传给Form验证 4.一开始我是很好奇,在vie ...
- LCA（最近公共祖先）
学习链接:https://baike.baidu.com/item/%E4%BC%B8%E5%B1%95%E6%A0%91/7003945?fr=aladdin 求LCA的方法有很多,在这里就只介绍一 ...
- Linux下用tree命令列出树形图
命令用法: tree 参数: -a 显示所有文件和目录. -A 使用ASNI绘图字符显示树状图而非以ASCII字符组合. -C 在文件和目录清单加上色彩,便于区分各种类型. -d 显示目录名称而非内容 ...
- (转)nmon和nmon analyser的下载和使用
原文:https://blog.csdn.net/a7442358/article/details/50186283 nmon 工具可以为 AIX 和 Linux 性能专家提供监视和分析性能数据的功能 ...