模态框：
html部分：
<!-- 按钮 --><button id="box" onclick="pop_box()">弹出框</button><!-- 弹出模态框 --><div class="div-container" id="div-container" style="display: none;"><div class="div-child-container"><div class="div-child"><span>hhhhh</span><div class="my-btn"><button id="cancleBtn" onclick="cancle()">取消</button><button id="confrim" onclick="confrim()">确认</button></div></div></div></div>
css部分：
<style type="text/css">#box{width: 80px;height: 40px;background: #fd7430;border:none;border-radius: 5px;outline: none;color: #fff;}.div-container{position: fixed;top: 0%;width: 100%;height: 100%;z-index:200;background: rgba(0,0,0,0.5) !important;/* 兼容ie几不知道，好像ie5 */background:#000;filter:Alpha(opacity=60);}/*设置div-child的父元素主要是将要此元素的父元素透明特性继承过来，故div-child不会半透明，而是不透明，解决了父元素透明，子元素也透明的bug */.div-child-container{position: relative;width: 400px;height: 200px;margin: auto;top: 30%;background: #fff;z-index: 250; /*z-index要放在父元素之上 */}.div-child{width: 400px;height: 200px;margin: auto;background: #fff;z-index: 300; /*z-index要放在父元素之上 */text-align: center;}.div-child span{position: relative;top: 40px;}.div-child .my-btn{margin-top: 80px;}.div-child .my-btn button{width: 80px;height: 40px;background:#fd7430;border: none;border-radius: 5px;color: #fff;outline: none;}.div-child .my-btn button:first-child(){margin-right: 20px;}</style>
JavaScript：
<script type="text/javascript">/*按钮弹出模态框*/function pop_box(){var container = document.getElementById('div-container');container.style.display="block";}/*取消事件*/function cancle(){var container = document.getElementById('div-container');container.style.display="none";}/*确认事件，因为现在没有确认事件，就将弹出框隐藏*/function confrim(){var container = document.getElementById('div-container');container.style.display="none";}</script>
