用jQuery实现页面遮罩弹出框

页面遮罩弹出框是最常见的一种情况，今天用jQuery实现页面遮罩弹出框，主要用的技术有JQuery，css和html,

html代码如下：

<div id="main"><a href="javascript:showBg();">点击这里查看效果</a>
        <div id="fullbg"></div>
        <div id="dialog">
        <p class="close"><a href="#" οnclick="closeBg();">关闭</a></p>
        <div>正在加载，请稍后....</div>
        </div>
</div>

css代码如下：

body {
   font-family:Arial, Helvetica, sans-serif;
   font-size:12px;
   margin:0;
}
#main {
   height:1800px;
   padding-top:90px;
   text-align:center;
}
#fullbg {
   background-color:gray;
   left:0;
   opacity:0.5;
   position:absolute;
   top:0;
   z-index:3;
   filter:alpha(opacity=50);
   -moz-opacity:0.5;
   -khtml-opacity:0.5;
}
#dialog {
   background-color:#fff;
   border:5px solid rgba(0,0,0, 0.4);
   height:400px;
   left:50%;
   margin:-200px 0 0 -200px;
   padding:1px;
   position:fixed !important; /* 浮动对话框 */
   position:absolute;
   top:50%;
   width:400px;
   z-index:5;
   border-radius:5px;
   display:none;
}
#dialog p {
   margin:0 0 12px;
   height:24px;
   line-height:24px;
   background:#CCCCCC;
}
#dialog p.close {
   text-align:right;
   padding-right:10px;
}
#dialog p.close a {
   color:#fff;
   text-decoration:none;
}

jQuery代码如下：

大致预览情况：

在ie9中预览

在firefox中预览

在chrome中预览

用jQuery实现页面遮罩弹出框相关推荐

layui 子页面写弹出框覆盖父页面，以及给弹框中的表单赋值
咋说呢,因为对 layui 不太熟悉,这个弹出框搞了好久,看了好多解决方案,大致尝试了一下其中几种,在坑中无法自拔...总之终于搞出来了,在这里分享一下我的笔记. 着急的直接戳这里看解决代码. 尝 ...
popup弹出html页面,Popup弹出框绑定添加数据事件（步奏详解）
这次给大家带来Popup弹出框绑定添加数据事件(步奏详解),Popup弹出框绑定添加数据事件的注意事项有哪些,下面就是实战案例,一起来看一下. 逻辑窗口P1中显示一组数据,并提供一个添加按钮点击按 ...
jquery weui 中alert弹出框在ios中跳动问题
问题描述: jquery-weui中的弹出框在ios上会有一个右下角向中间滑动的效果,在Android上没有这个效果. 解决方法: 修该jquery-weui.js中的openModal方法如下图: ...
web 前台页面内弹出框（一）
本文已经不推荐在使用了,有更加优秀的 ,详情参考layui弹出层前端当前页面编辑一些数据时,往往会用到弹出窗口,但每个页面单独修改有显得比较麻烦,因此,可以建立一个公用的方法,去掉用就 ...
页面拖动功能jquery +js+html5 移动弹出框拖动弹出框拖动 div 拖动弹出框
实现逻辑分析: 1.当鼠标触发按下事件 2.记录当前屏幕坐标 3.和要控制的div坐标向减的到二者之间关系 4.通过鼠标移动事件 5.激活div移动事件 6.div的新位置就鼠标位置和原始坐标的关系值 ...
layui 父页面向弹出框中的子页面form表单进行赋值
1 ,父页面js layer.open({type: 2,title: '修改数据',shadeClose: false,shade: 0.8,area: ['60%', '60%'],content ...
Windows Phone 7 中的页面和弹出框
http://msdn.microsoft.com/zh-cn/magazine/hh456394.aspx 转载于:https://www.cnblogs.com/thankchunzi/archi ...
[Js插件]使用JqueryUI的弹出框做一个“炫”的登录页面
引言查看项目代码的时候,发现项目中用到JqueryUi的弹出框,可拖拽,可设置模式对话框,就想着使用它弄一个登录页面. 弹出框在Jquery Ui官网可定制下载弹出框,下载和弹出框下载相关的js文 ...
android 气球菜单,jQuery实现气球弹出框式的侧边导航菜单效果
本文实例讲述了jQuery实现气球弹出框式的侧边导航菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的气球弹出框式的侧边导航菜单,预览效果时左下角会提示错误,而且看不到效果,刷 ...

用jQuery实现页面遮罩弹出框

用jQuery实现页面遮罩弹出框相关推荐

最新文章

热门文章