模态框：
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>html、css和js原生写一个模态弹出框，顺便解决父元素半透明子元素不透明效果
原文地址：http://www.cnblogs.com/yuanxinru321/p/7717595.html