如何在css中编写modal框

html-css016

如何在css中编写modal框,第1张

使用CSS Modal HTML结构

<ul><li><a href="#modal-show" title="CSS Modal">CSS Modal</a></li></ul><section class="modal--show" id="modal-show" tabindex="-1" role="dialog" aria-labelledby="label-show" aria-hidden="true">

   <div class="modal-inner">

    <header>

      <h2 id="label-show">CSS Modal—纯CSS实现模态窗口</h2>

    </header>

    <div class="modal-content">

         <p>今天介绍一个用CSS实现模态窗口的插件——CSS Modal ，利用它可以很方便的实现模态窗口。它可以用来展示任意的HTML内容，并且支持响应式设计，具有良好的兼容性，通过它的js扩展，还能实现更强大的功能。</p>

    </div>

    <footer>

    <p>by ZJIAN</p>

    </footer>

    </div>

    <a href="#!" class="modal-close" title="Close this modal" data-dismiss="modal" data-close="Close">&times</a></section>

这是它最基本的使用方法，点击ul标签中的CSS Modal就会弹出section标签中的内容，如果你想使用更高级的功能，比如相册的展示、视频等等功能，CSS Modal也提供了解决方案，需要引入plugins中对应的js文件。

用CSS和JS改变z-index的属性值就可以实现模态框

[html] view plain copy

<html>

<head>

<title>modal box</title>

<style type="text/css">

*{

margin:0px

padding:0px

}

</style>

</head>

<body>

<!--先在CSS里面把zindex的值设为负值让其在背景图片后面-->

<div style="background:url(http://pic.90sjimg.com/back_pic/00/04/27/49/5b1eee8bdba7b9aefc62fccafe72737c.jpg)width:100%height:800pxz-index:1">

<button id="modal-box">弹框</button>

<div id="modal-show" style="position:fixedz-index:-9999width:100%height:100%background-color:rgba(236, 214, 214, 0.2)">

</div>

<div id="modal-show2" style="position:fixedz-index:-9999width:30%height:30%margin:200px autoborder:1px solid red">

欢迎你登录

</div>

</div>

<script type="text/javascript">

document.getElementById("modal-box").onclick=function()//点击按钮改变zIndex的值为1让模态框在背景图的前面

{

document.getElementById("modal-show").style.zIndex = "1"

document.getElementById("modal-show2").style.zIndex = "1"

}

document.getElementById("modal-show").onclick=function()//点击模态框的透明背景时，模态框的zIndex值变为-9999，会隐藏在

{<span style="white-space:pre"></span>背景图片的后面，点击模态框本身是不会消失的<span style="white-space:pre">

</span>

this.style.zIndex = "-9999"

document.getElementById("modal-show2").style.zIndex = "-9999"

}

</script>

</body>

</html>

那个是在点击触发事件后,弹出一个div,那个div的style里面有个属性z-index,你设置越大就在别的模块上面,给那个div设置高度和宽度,铺面全屏,背景设置成半透明,你要的那个弹窗在那个div的上面,这样就只能点你说的那个弹窗,点其他的位置就都点到了那个半透明的div上面,当然没反应啊