【html/css】模态框的实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>modaldemo</title>
<style media="screen">
#modal-overlay {
visibility: hidden;
position: absolute; /* 使用绝对定位或固定定位 */
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1000;
background-color: #333;
opacity: 0.5; /* 背景半透明 */
}
/* 模态框样式 */
.modal-data{
width:300px;
margin: 100px auto;
background-color: #fff;
border:1px solid #000;
padding:15px;
text-align:center;
}
</style>
</head>
<body style="position: relative">
<div style="width: 600px; height: 600px;">
<div id="modal-overlay">
<div class="modal-data">
<p>一个简单的模态框。</p>
<p>点击 <a href="#" onclick="overlay()">这里</a>关闭</p>
</div>
</div>
</div> <a href="#" onclick="overlay()">显示对话模态框</a> <script type="text/javascript">
function overlay () {
var e1 = document.getElementById('modal-overlay');
e1.style.visibility = (e1.style.visibility == "visible") ? "hidden" : "visible";
} </script>
</body>
</html>
注意：#modal-overlay 一定要是相对body来设置绝对定位。若是不给body设置position，#modal-overlay 就是相对html设置了绝对定位，当html页面太高或者太宽而出现滚动条的时候，#modal-overlay 就没有覆盖整个页面的效果了。
【html/css】模态框的实现的更多相关文章
- 伪类target实现纯css模态框
今天看到一个纯css模态框,觉得是很牛呀 看了下用了target伪类, 一直不知道有这么神奇的伪类 .. 用法是这样的,给模态框一个id, <div id="pop" cla ...
- CSS之样式属性(背景固定、圆形头像、模态框)
CSS属性 一.宽和高 width属性可以为元素设置宽度. height属性可以为元素设置高度. 块级标签才能设置宽度,内联标签的宽度由内容来决定. div {width: 1000px;backgr ...
- JS /CSS 实现模态框（注册和登录组件）
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 44 CSS 浮动 模态框 定位
一.浮动 float : 浮动的盒子不占原来的位置,其下方的盒子会上移 父盒子会发生塌陷现象.同一级盒子right浮动,同级左边的盒子需要左浮动,right浮动的盒子才能上来 由于浮动框不在文档的普通 ...
- Bootstrap 模态框（Modal）插件
原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...
- Bootstrap <基础三十二>模态框（Modal）插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 ...
- Bootstrap 3 模态框播放视频
Bootstrap 3 模态框播放视频 I'm trying to use the Modal feature from Bootstrap 3 to show my Youtube video. I ...
- 去除bootstrap模态框半透明阴影
当使用bootstrap模态框默认自带半透明阴影,如果想要去除阴影,需要怎么做呢? 今天在项目中我遇到了这个问题,想要去除模态框的阴影,试了好久都没解决.后来问同事的时候才知道,当模态框弹出后,会加上 ...
- bootstrap日期控件在火狐下的模态框中选择时间下拉菜单无效的解决办法
今天收到程序组提交的一个兼容BUG,在火狐中使用模态框加载日期控件时选择时间下拉菜单没有效果(不能点击),而在谷歌中却是好的, 排错思路:1,在当前页面主层放置一个时间控件,测试通过 2,在ajax加 ...
随机推荐
- jmeter之beanshell断言实例
.首先储存一个接口的响应结果,比如在http请求的后面添加beanshell后置处理器(BeanShell PostProcessor)来储存http请求的响应结果: import org.json. ...
- 使用mint-ui的 InfiniteScroll 做数据分页请求
1.首先 npm install mint-ui 2.在main.js引用 import { InfiniteScroll } from 'mint-ui'; Vue.use(InfiniteScro ...
- [转] 使用HTTPS在Nexus Repository Manager 3.0上搭建私有Docker仓库
FROM: https://www.hifreud.com/2018/06/06/03-nexus-docker-repository-with-ssl/ 搭建方式 搭建SSL的Nexus官方提供两种 ...
- Android中自定义组合控件
Android中自定义控件的情况非常多,一般自定义控件可以分为两种:继承控件及组合控件.前者是通过继承View或其子类,重写方法实现自定义的显示及事件处理方式:后者是通过组合已有的控件,来实现结构的简 ...
- 一、OPENERP 的一个demo
安装好OPENERP后,使用 ps -aux|grep openerp 从输出的内容可以得到OPENERP的安装信息, /usr/bin/python /usr/bin/openerp-server ...
- Mac 10.12搭建OpenVPN服务器以及客户端的使用
说明:我未实践,大概就是这几个步骤,建议服务器在Linux下搭建效果会更好. 1.用brew下载openvpn brew install openvpn 2.命令行输入 openvpn --versi ...
- vue记事1
1.组件引入css. 例:test.vue引入swiper.min.css | -- src | | -- components | | -- test | | -- test.vue | | - ...
- Determining IP information for eth0...failed
事故现场 eth0 Link encap:Ethernet HWaddr :0C::B6:D2:5A inet6 addr: fe80::20c:29ff:feb6:d25a/ Scope:Link ...
- CentOS6.4将MySQL5.1升级至5.5.36
1.为了安全期间,首先需要备份原有数据 2.卸载原有MySQL,先停止原有的MySQL服务,再查找 find / -name mysql [root@qxyw /]# find / -name mys ...
- PHP之string之explode()函数使用
explode (PHP 4, PHP 5, PHP 7) explode - Split a string by string explode - 使用一个字符串分割另一个字符串 Descripti ...