html弹出窗并用遮罩层的实例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.7.2.min.js"></script>
<style>
*{padding: 0; margin: 0}
/*遮罩层*/
.box{
position: fixed;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.2);
display: none;
}
/*弹出层*/
.box1{
width: 500px;
height: 500px;
position: fixed;left: 50%; top: 25%;
background: red;
margin-left: -250px;
border: 1px solid #000000;
}
.box2{
width: 500px;
height: 500px;
position: fixed;left: 50%; top: 25%;
background: green;
margin-left: -250px;
border: 1px solid #000000;
}
</style>
<script> </script>
</head>
<body>
<div class="box" id="b1">
<div class="box1">
<a href="javascript:;" onclick="jQuery('#b1').hide()" class="close">关闭</a>
</div>
</div>
<div class="box" id="b2">
<div class="box2">
<a href="javascript:;" onclick="jQuery('#b2').hide()" class="close">关闭</a>
</div>
</div>
<a href="javascript:;" onclick="jQuery('#b1').show()" class="show">显示</a>
<a href="javascript:;" onclick="jQuery('#b2').show()" class="show">显示</a>
312313232323
</body>
</html>
html弹出窗并用遮罩层的实例的更多相关文章
- 弹出框、遮罩层demo
仿alert.confirm的弹出框. 弹出后,用遮罩层将背景虚化. 代码如下: <html> <meta http-equiv="Content-Type" c ...
- 微信小程序弹出和隐藏遮罩层动画以及五星评分
参考源码: http://www.see-source.com/weixinwidget/detail.html?wid=82 https://blog.csdn.net/pcaxb/article/ ...
- element-ui 弹出组件的遮罩层在弹出层dialog模态框的上面
造成的原因: 因为dialog的组件外层div设置了 position:absolute: 属性所以导致遮罩层会在最上面. 解决方法: 在属性内加上这段代码 :append-to-body=&quo ...
- element-ui框架的el-dialog弹出框被遮罩层挡住了
解决办法 在el-dialog标签里添加 :modal-append-to-body='false'
- element ui 弹出组件的遮罩层在弹出层的上面的解决方法
<el-dialog title="收货地址" :visible.sync="dialogFormVisible" :modal-append-to-bo ...
- Jquery和Javascript 实际项目中写法基础-弹出窗和弹出层 (4)
一.实际项目中有很多如下界面效果. 二.该效果可以归结为弹出窗或者弹出层来实现的,为什么这么说?看如下代码: <!DOCTYPE html> <html> & ...
- bootstrap-data-target触发模态弹出窗元素的data使用 data-toggle与data-target的作用 深入ASP.NET MVC之九:Ajax支持 Asp.Net MVC4系列--进阶篇之AJAX
bootstrap-data-target触发模态弹出窗元素的data使用 时间:2017-05-27 14:22:34 阅读:4479 评论:0 收藏:0 [ ...
- Bootstrap模态弹出窗
Bootstrap模态弹出窗有三种方式: 1.href触发模态弹出窗元素: <a class="btn btn-primary" data-toggle="moda ...
- jquery Mobile弹出窗
先创建一个窗体 <div data-role="popup" id="popupView" class="ui-content" da ...
随机推荐
- ubuntu14.04 键盘错位小问题
分享一个ubuntu14.04里的小问题,不知道有没有人跟我一样悲催 问题: 键盘错位了,@和"两个符合正好颠倒,~#这几个也错乱了,~符号跑到了|上,#跑到了shift+|上,这个问题在敲 ...
- swiper的使用
最近要用html5制作可以一屏一屏向上滑动的页面,发现大家使用swiper插件的较多,所以试了试,发现做出来的效果还不错,喜欢的朋友可以参考一下自己动手做啦. 1.首先我们要引入4个文件: <h ...
- RBL开发笔记三
2014-08-26 20:06:24 今天就是在开发这个EPOLL来处理网络事件 封装较为健壮的EPOLL模型来处理基本的网络IO 1) 超时这个主题先没有弄 在开发EPOLL包括select/po ...
- 数据库基础知识(1)--数据库php连接
关系数据库的常用基本术语 数据data 数据库database 数据库管理系统dbms 表(数据表)table 字段field,列column 行row,记录record 数据库操作的基本模式(流程 ...
- 多媒体音频(audio)
随着计算机技术的发展,特别是海量存储设备和大容量内存在PC机上的实现,对音频媒体进行数字化处理便成为可能.数字化处理的核心是对音频信息的采样,通过对采集到的样本进行加工,达成各种效果,这是音频媒体数字 ...
- CommandExtra.lua --游戏命令扩展
--[[作者信息: Command Extra (游戏命令扩展) 作者QQ:247321453 作者Email:247321453@qq.com 修改日期:2014-3-12 功能:添加额外的命令.G ...
- (转)几种范数的解释 l0-Norm, l1-Norm, l2-Norm, … , l-infinity Norm
几种范数的解释 l0-Norm, l1-Norm, l2-Norm, - , l-infinity Norm from Rorasa's blog l0-Norm, l1-Norm, l2-Norm, ...
- MySQL性能优化总结(转)https://yq.aliyun.com/articles/24249
摘要: 一.MySQL的主要适用场景 1.Web网站系统 2.日志记录系统 3.数据仓库系统 4.嵌入式系统 二.MySQL架构图: 三.MySQL存储引擎概述 1)MyISAM存储引擎 MyIS ...
- JAVA自定义事件监听完整例子---sunfruit[转]
http://cache.baiducontent.com/c?m=9f65cb4a8c8507ed4fece763105392230e54f733628a854d2c90c05f9313071601 ...
- [Spring MVC] - SpringMVC的各种参数绑定方式
SpringMVC的各种参数绑定方式 1. 基本数据类型(以int为例,其他类似):Controller代码: @RequestMapping("saysth.do") publi ...