<!--弹出框--> <div class="pop_up" style="display:block;" id="update_ok"> <div class="pop_up_bg"></div> <div class="pop_up_main"> <div class="pop_up_sz"><p>修改成功</p></div> <!-- <div class="pop_up_dl"><a href="#">登 陆</a></div> --> <div class="confirmBtn" onclick="document.getElementById('update_ok').style.display='none';">确 定</div> </div> </div> <!--弹出框--> <style type="text/css"> /*弹出框*/ body{ font-family: "黑体","SimHei",sans-serif; } .pop_up { width: 100%; margin: 0 auto; } .pop_up_bg { width: 100%; height: 100%; position: fixed; background: #000; left: 0; top: 0; z-index: 15; -webkit-opacity: 0.5; /* Netscape and Older than Firefox 0.9*/ -moz-opacity: 0.5; /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/ -khtml-opacity: 0.5; /* IE9 + etc...modern browsers*/ opacity: .5; /* IE 4-9*/ filter: alpha(opacity=50); /*This works in IE 8 & 9 too*/ -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*IE4-IE9*/ filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=50); } .pop_up_main { width: 15%; margin: auto 42%; background: #fff; top: 40%; position: absolute; z-index: 22; /*padding: 5% 10%;*/ border-radius: 10px; } .pop_up_sz { width: 90%; margin: 10% auto; overflow: hidden; } .pop_up .confirmBtn { width: 28%; margin:0 auto 5%; border-radius: 5px; background: #1881DC; text-align: center; height: 20px; line-height: 20px; color: white; cursor: pointer; padding: 10px 20px; font-size: 16px; } .pop_up_sz p { font-size: 18px; font-weight: bold; font-family: "微软雅黑"; color: #000000; text-align: center; } .pop_up_dl { width: 90%; margin: 0 auto; overflow: hidden; margin-top: 6%; text-align: center; } .pop_up_dl a { padding: 2% 5%; background: #ff0000; color: #fff; font-size: 1.6vw; text-align: center; width: 50%; display: block; border-radius: 8px; margin-left: 14%; } /*弹出框end*/ </style>
别人写的代码,蛮好,收藏了。
弹层 <!--弹出框--> <div class="pop_up" style="display:none;" id="update_ok"> <div class="pop_up_bg"></div> <div class="pop_up_main"> <div class="pop_up_sz"><p>修改成功</p></div> <!-- <div class="pop_up_dl"><a href="#">登 录</a></div> --> <div class="confirmBtn" onclick="document.getElementById('update_ok').style.display='none';">确定</div> </div> </div> <!--弹出框--> /*弹出框*/ .pop_up { width: 100%; margin: 0 auto; } .pop_up_bg { width: 100%; height: 100%; position: fixed; background: #000; left: 0; top: 0; z-index: 15; -webkit-opacity: 0.5; /* Netscape and Older than Firefox 0.9*/ -moz-opacity: 0.5; /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/ -khtml-opacity: 0.5; /* IE9 + etc...modern browsers*/ opacity: .5; /* IE 4-9*/ filter: alpha(opacity=50); /*This works in IE 8 & 9 too*/ -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*IE4-IE9*/ filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=50); } .pop_up_main { width: 30%; margin: auto 26%; background: #fff; top: 40%; position: absolute; z-index: 22; /*padding: 5% 10%;*/ border-radius: 10px; } .pop_up_sz { width: 90%; margin: 10% auto; overflow: hidden; } .pop_up .confirmBtn { width: 80%; margin:0 auto 5%; border-radius: 5px; background: red; text-align: center; height: 24px; line-height: 24px; color: white; cursor: pointer; } .pop_up_sz p { font-size: 1.7vw; font-weight: bold; font-family: "微软雅黑"; color: #000000; } .pop_up_dl { width: 90%; margin: 0 auto; overflow: hidden; margin-top: 6%; text-align: center; } .pop_up_dl a { padding: 2% 5%; background: #ff0000; color: #fff; font-size: 1.6vw; text-align: center; width: 50%; display: block; border-radius: 8px; margin-left: 14%; } /*弹出框end*/