jQuery+css+html实现页面遮罩弹出框

页面遮罩弹出框是最常见的一种情况，今天用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="#" onclick="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代码如下：


代码如下:

<script type="text/javascript">
//显示灰色 jQuery 遮罩层
function showBg() {
var bh = $("body").height();
var bw = $("body").width();
$("#fullbg").css({
height:bh,
width:bw,
display:"block"
});
$("#dialog").show();
}
//关闭灰色 jQuery 遮罩
function closeBg() {
$("#fullbg,#dialog").hide();
}
</script>

大致预览情况：

在ie9中预览

在firefox中预览

在chrome中预览

赞 (0)

相关推荐

  • jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7

    本屌丝最近工作要求重写网站所有代码,so...极其蛋疼的事情出现了,管我的人要求不能用网上的插件,oh~~~my god!! 这是多么能让千万只草原上的马儿奔腾的要求~~~ 先实现一个比较简单的功能: 需求:网页遮罩层/弹出层,兼容IE6 幸好本屌丝以前聪明收集了个js的版本,so,自己改写成了jQuery插件形式的,方便以后使用. 屁话不多放,无码无真相! 复制代码 代码如下: /******************************* * @name Layer跨浏览器兼容插件 v1.

  • jQuery+html5实现div弹出层并遮罩背景

    渐入弹窗,背景变色不可点击.查看效果:http://runjs.cn/detail/t08gmoij <!doctype html> <html> <head> <meta charset="utf-8"> <title>popup</title> <script type="text/javascript" src="jquery-2.1.3.min.js">&

  • jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)

    jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)

    最近项目遇到了遮罩层的一些问题,总结一下: 弹出遮罩层 遮罩层弹出有非常多的方法,这里只写出本人用的代码,使用jq操作dom的方法进行实现的. <style>.box{position:absolute;width:100%;left:50%;height:auto;z-index:100;background-color:#f5f5f5;border:1px #ddd solid;padding:1px;}</style><div id="bg" v-c

  • JS遮罩层效果 兼容ie firefox jQuery遮罩层

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • jquery 圆角遮罩图片实现图片圆角

    jquery 圆角遮罩图片实现图片圆角

    运行后请刷新一次. 圆角遮罩图片实现图片圆角 by ahuinan 2009-5-15 $(function(){ $(".kuang").after(" "); }) li{ list-style:none; float:left; margin-right:20px; margin-top:20px; position:relative; } img{ border:0; width:94px; height:94px; } .kuang_div{ positi

  • jquery下实现overlay遮罩层代码

    复制代码 代码如下: /* 模态遮罩层单例对象 opacity:背景透明度 1. show() 2. close() */ Q.Overlay = function(opacity) { var self = this; self._createDiv = function() { if (self._overlay) return; self._overlay = $("<div></div>"); var overlayCss = { 'width': '1

  • jQuery实现可兼容IE6的遮罩功能详解

    本文实例讲述了jQuery实现可兼容IE6的遮罩功能.分享给大家供大家参考,具体如下: 最精简,最强大的 jQuery 遮罩层效果. 当浏览器改变大小时,遮罩层的大小会相应地改变. 遮罩层上方的对话框可随 scroll 的改变而改变,即对话框在浏览器居中显示. HTML 代码 <div id="main"><a onclick="showBg();" href="#" rel="external nofollow&qu

  • jquery弹出关闭遮罩层实例

    复制代码 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>jquery简便实现遮罩层

  • 兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码

    在页面点击"注册",出现一层有不透明度的黑色遮罩:遮罩层的上方是注册框:此时无法点击页面上除注册框外的其他元素:点击注册框上的"随便逛逛",遮罩层消失. 预览地址: http://jsfiddle.net/p2x3c7df/embedded/result/ 要点: 1.注册框始终水平.垂直居中,包括鼠标滚轮上下滚动页面.缩放页面和调整浏览器窗口大小时 主要由CSS控制,注册框的宽度和高度都已经确定( 620*420px ),首先使用position:fixed来使它

  • JQuery 遮罩层实现(mask)实现代码

    其中有mask()和unmask()这两个方法,这两个方法在指定的元素上添加一个遮罩层和一个提示消息实现,增加客户体验.由于最近做项目的时候,发现有时为了使用这一两个方法需要引入一个比较"庞大"的Extjs进来,觉得有点不划算,于是自己用jquery实现了一个比较简单mask.unmask方法来实现该效果.大家知道jquery是一个优秀的javascript框架,不但体积小而且使用方便,我现在逐渐将系统中使用Extjs实现的代码或组建全部更换成Jquery来实现.好了不多说,上我的代码

  • jQuery+AJAX实现遮罩层登录验证界面（附源码）

    jQuery+AJAX实现遮罩层登录验证界面（附源码）

    JQuery遮罩层登录界面效果的实现,AJAX实现登录验证,文章尾有完整示例源码下载,欢迎大家学习研究. 操作系统:Windwos7 Ultimate 开发工具:Visual Studio 2010 数据库:Sql Server 2005 测试浏览器:IE8.FF3.6.8.Google Chrome (IE8中弹出登录层后会出现竖拉条,其他两种没有出现,那个竖拉条可以在JS中通过修改数值让其不出现,但是下面会出现白边,越来越觉得IE有点那个了......) 1.预览 1)登录前 2)点击登录显

随机推荐