<!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. 什么是cluster（群集）

    一.群集的概念 在互联网应用中,随着站点对硬件性能.相应速度.服务稳定性.数据可靠性等要求越来越高,单台服务器力不从心,使用小型机或大型机价格还太昂贵,因此我们使用普通服务器来构建服务群集显然最划算. ...

  2. css属性详解和浮动

    一.CSS属性组成和作用 属性:属性值 1)每个css样式都必须由两部分组成:选择符和声明 注:声明又包括属性和属性值 2)css属性:属性是指定选择符具有的属性,他是css的核心,css2共有150 ...

  3. selenium(python)用HTMLTestRunner导出报告（断言）信息的显示

    导出报告如图所示,没有显示相关信息 修改HTMLTestRunner.py文件的763-768行,注释掉if else,保留else 的uo = o 再次运行可看到信息(测试用例中的print信息也会 ...

  4. js计算日期相差天数

    日期不能直接相加减比较大小,需要转换一下然后计算最后转换成天,当然,你也可以根据同样类似的方法去转换成小时,或者月,年. function DateDiff(sDate1, sDate2) { //s ...

  5. Qt4.8.5移植

    这两天搞了Qt移植 因为不小心 耽误了挺多时间 但是也比较好的掌握了   现在记录一下 准备工具: tslib-1.16 qt-everywhere-opensource-src-4.8.5.tar ...

  6. 数据库SQL（1）

    EG1:db.LpOutputGroups.GroupBy(q => q.CalcGroupDesc).ToList().OrderByDescending(m => m.First(). ...

  7. J15W-J45W铜质截止阀厂家，J15W-J45W铜质截止阀价格 - 专题栏目 - 无极资讯网

    无极资讯网 首页 最新资讯 最新图集 最新标签   搜索 J15W-J45W铜质截止阀 无极资讯网精心为您挑选了(J15W-J45W铜质截止阀)信息,其中包含了(J15W-J45W铜质截止阀)厂家,( ...

  8. jQuery懒加载插件 – jquery.lazyload.js

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  9. 解决执行maven项目出现 SLF4J: Failed to load class “org.slf4j.impl.StaticLoggerBinder”. error

    最近再弄maven项目,运行起来没有问题,但是Console控制台会报错,比如说如下的问题异常提示: 由此我们可以看出,报出错误的地方主要是slf4j的jar包,而故障码中“Failed to loa ...

  10. signed char型内存位bit表示

    signed char型内存 80 81 82 83 84 85 86 87 88 89 8a 8b 8c 8d 8e 8f 90 91 92 93 94 95 96 97 98 99 9a 9b 9 ...