<!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简便实现遮罩层--柯乐义</title>
<meta charset="utf-8">
<style>
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.8;
position:absolute;
top:0;
z-index:3;
filter:alpha(opacity=80);
-moz-opacity:0.5;
-khtml-opacity:0.5;
}
#dialog {
background-color:#fff;
border:5px solid rgba(0,0,0, 0.8);
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;
}
</style>
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
showBg();
});
</script>
<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>
</head>

<body>
<div id="fullbg"></div>
<div id="dialog">
<p class="close"><a href="#" onclick="closeBg();">关闭</a></p>
<div>正在加载，请稍后....</div>
</div>
</div>
</body>
</html>

html 遮罩层以及弹出框的制作的更多相关文章

  1. Axure Base 09 带遮罩层的弹出框

    示例原型下载:小楼Axure原创元件-带遮罩层的弹出框 实现目标: 1.   点击按钮弹出带遮罩层的对话框: 2.   页面上下左右滚动时,弹出的对话框水平和垂直始终居中. 实现步骤如下: 1. 拖入 ...

  2. js 带遮罩层的弹出层

    最近有个小伙伴问我关于mui的带遮罩层的弹出层,我给他发了个相关demo,但是因为他是新手的原因没有看懂,所以我写了一个单纯的原生的带遮罩层的弹出层dome.写这篇微博希望可以帮到需要的小伙伴. &l ...

  3. web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开

    https://blog.csdn.net/zgsdzczh/article/details/79744838 web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开   <style typ ...

  4. 【Javascript Demo】谷歌地图简单实现（附遮罩层和弹出层实现）

    虽然百度地图实现了,但只是国内的,而且前几天貌似还出问题了,对于国际的只能用谷歌地图了,所以就简单研究了下,做了个差不多的. 基本步骤,谷歌地图API文档其实写的很清楚了,先获取API密钥,然后引用j ...

  5. 【Javascript Demo】遮罩层和弹出层简单实现

    最近纠结于遮罩层和弹出层的实现,终于搞定了个简单的版本.示例和代码如下,点击按钮可以看到效果: 1.示例: 2.代码: <!DOCTYPE html PUBLIC "-//W3C//D ...

  6. element-ui 弹出组件的遮罩层在弹出层dialog模态框的上面

     造成的原因: 因为dialog的组件外层div设置了 position:absolute: 属性所以导致遮罩层会在最上面. 解决方法: 在属性内加上这段代码 :append-to-body=&quo ...

  7. js特效遮罩层（弹出层）

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  8. Js弹出层，弹出框代码

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

  9. ASP.NET—013：实现带控件的弹出层（弹出框）

    http://blog.csdn.net/yysyangyangyangshan/article/details/38458169 在页面中用到弹出新页面的情况比较多的,一般来说都是使用JS方法sho ...

随机推荐

  1. 杂项-公司：Oracle

    ylbtech-杂项-公司:Oracle 甲骨文公司,全称甲骨文股份有限公司(甲骨文软件系统有限公司),是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩.1989年正式进入中国市场.201 ...

  2. 杂项-公司：Axway

    ylbtech-杂项-公司:Axway Axway 公司是法国Sopra 集团从事应用系统集成(EAI/B2Bi)软件及相关咨询服务业务的全资子公司.Axway公司成立于1980年,总部位于美国凤凰城 ...

  3. System.Web.Mvc.RedirectToRouteResult.cs

    ylbtech-System.Web.Mvc.RedirectToRouteResult.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neutr ...

  4. python生成word中文字体

    python生成word中文字体 我们今天用python生成word文件,主要是用到了PyRTF包生成rtf文件,由于PyRTF的包中文教程比较少,所以特此记录几篇文章,也希望给大家有一些帮助. 开始 ...

  5. Hibernate 查询语言

    查询语言 Hibernate 查询语言(HQL)是一种面向对象的查询语言,类似于 SQL,但不是去对表和列进行操作,而是面向对象和它们的属性. HQL 查询被 Hibernate 翻译为传统的 SQL ...

  6. OCCT 7.4.0 beta version is available

    OpenCASCADE 7.4.0测试版本发布 OCC在9月16号发布了opencascade740 beta测试版本,新版本里面做了如下一些重点修改如下: 造型算法部分主要对网格化算法BRepMes ...

  7. 局域网下共享 MySQL 数据库连接

    转载自:https://blog.csdn.net/larger5/article/details/96974554 一.前言 在使用公司的一些开发框架,需要特定的 MySQL 版本,还要做一些配置操 ...

  8. Python学习day24-面向对象的三大特征之继承

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  9. springboot4.1.1的log4j2配置

    一.默认情况下,Spring Boot会用Logback来记录日志,并用INFO级别输出到控制台: 日志输出内容元素具体如下: 时间日期:精确到毫秒 日志级别:ERROR, WARN, INFO, D ...

  10. 使用springmvc实现文件上传

    该配置在javaweb上传文件篇中的基础上进行配置:https://www.cnblogs.com/flypig666/p/11745182.html 1.配置文件解析器,在springmvc.xml ...