<!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()的更多相关文章

  1. Jquery打造的类似新浪微博@提醒功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Jquery弹窗组件

    下面是写的简单的Jquery弹窗组件 暂不支持animate,只能满足一般的弹窗显示隐藏需求,更多功能后续会完善!网上及jquery组件很多这样的弹窗,但是用别人的感觉心里过不去,所以就随便写写,当做 ...

  3. jquery 弹窗插件 layer

    jquery 弹窗插件 layer 官网:http://sentsin.com/jquery/layer/ 1 <!DOCTYPE html PUBLIC "-//W3C//DTD H ...

  4. jquery层居中,点击小图查看大图,弹出层居中代码，顶部层固定不动，滚动条滚动情况

    jquery层居中,点击小图查看大图,弹出层居中代码 http://www.cnblogs.com/simpledev/p/3566280.html 见第一版,发现一个情况,如果页面内容多出一屏的情况 ...

  5. 实现js的类似alert效果的函数

    这个简单的类似alert的函数,效果还行,至于css样式,那没的说了,笔者确实尽力了,如果读者觉得太烂,你可以随便改函数的样式的,反正,笔者觉得还可以,呵呵. <!DOCTYPE html PU ...

  6. js实现弹窗居中

    在一些页面中,我们总会遇到一些弹窗不居中的时候,还要根据浏览器的大小来调整弹窗的弹出位置, 之前我也遇到这样的问题,现在我把我知道的呈现给大家 css样式 .windowBox{ width:500p ...

  7. [转]jQuery插件实现模拟alert和confirm

    本文转自:http://www.jb51.net/article/54577.htm (function () { $.MsgBox = { Alert: function (title, msg) ...

  8. 自编jQuery插件实现模拟alert和confirm

    现在绝大多数网站都不用自带的alert和confirm了,因为界面太生硬了.因此这个插件就这样产生了自己定制一个的想法...... 啥也不说,先上图,有图有真相 :) 现在绝大多数网站都不用自带的al ...

  9. jquery左右链接类似frameset的插件

    一般在使用jquery的扩展的 ui方面的插件, 都要注意链接两个文件 一个是ui 相关的js文件 另一个是 ui相关的 css文件! 参考这个css布局 通常多个平行的items 都是用ul li来 ...

随机推荐

  1. ios 字符串处理：截取字符串、匹配字符串、分隔字符串

    1.截取字符串 NSString*string =@"sdfsfsfsAdfsdf";string = [string substringToIndex:7];//截取掉下标7之后 ...

  2. CiSCO 交换机配置 SSH 登陆

    CiSCO 交换机配置 SSH 登陆 题目:在三层交换机上仅运行 SSH 服务,且用户名和密码的方式登录交换机. (一)了解主机名与域名 ​ 1."主机名" 为该设备的名称 ​ 2 ...

  3. springmvc初步配置

    导包/添加依赖: <dependency> <groupId>org.springframework</groupId> <artifactId>spr ...

  4. POJ3321 Apple Tree (JAVA)

    树形数组题,有一定难度. 首先得搞清楚树形数组是什么 - 它是建立在原始数组上的统计数组 - 目的:方便对原始数组进行切片统计,主要用于统计切片的累加和 其实你可以对切片进行扫描,把元素一个一个加起来 ...

  5. win7 设置docker加速器

    本来专门已经有了一个源于docker加速器的了,公司的电脑是mac,配置很简单,但是我自己的电脑是win7,在实际操作的时候还真是累啊,官网的教程不知道为什么没起效果,所以最终还是找了其他人发的帖,可 ...

  6. netsh命令操作ipsec

    IPsec就是IP安全筛选,本可以在本地安全策略中的窗口上进行操作添加,那么netsh也可以支持命令行操作这部分的内容. 我们的示例是禁止IP地址为192.168.1.10访问财务部某机3389端口 ...

  7. [转] crontab命令

    [From] http://man.linuxde.net/crontab   当前位置:首页 » 系统管理 » crontab crontab命令 crontab命令被用来提交和管理用户的需要周期性 ...

  8. ajax乱码的问题

    ajax 乱码情况与原因很多,本文只讲其中之一: 浏览器端正常的数据,用ajax提交到服务器上就乱码了. 当ajax的提交方式是get而不是post时,其所携带的数据不会被字符编码过滤器所拦截(事实上 ...

  9. 面经问题总结——django相关

    1.让你从头设计一个web框架,第一步你会做什么? 2.django的orm是怎么实现的? 3.django的URL路径映射是怎么实现的? 4.平常你怎么运用django提供的钩子函数? 5.三级分销 ...

  10. String字符串排序1.8 lamda表达式以及1.7自定义排序

    // 1.8 public class text { public static void main(String[] args) { String s1 = "哈哈哈11,呵呵呵22,嘿嘿 ...