html：
<script type="text/javascript"> // 打开弹窗 function OpenDetail(show_div, mask_div, content) { setDivCenter("#" + show_div); document.getElementById(show_div).style.display = 'block'; document.getElementById(mask_div).style.display = 'block'; var bgdiv = document.getElementById(mask_div); bgdiv.style.width = document.body.scrollWidth; $("#" + mask_div).height($(document).height()); document.getElementById('spContent').innerText = content; } function setDivCenter(divName) { var top = ($(window).height() - $(divName).height()) / 2; var left = ($(window).width() - $(divName).width()) / 2; var scrollTop = $(document).scrollTop(); var scrollLeft = $(document).scrollLeft(); $(divName).css({ position: 'absolute', 'top': top + scrollTop, left: left + scrollLeft }); } // 关闭弹窗 function CloseDiv(show_div, mask_div) { document.getElementById(show_div).style.display = 'none'; document.getElementById(mask_div).style.display = 'none'; }; </script> <html> <head> <link href="css/popupWindow.css" rel="stylesheet" /> <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script> <head> <body> <!--弹出层时背景层DIV--> <div id="maskDiv" class="black_overlay"> </div> <div id="popupDiv" class="white_content"> <div style="cursor:default;height:50px; margin-right:10px;margin-top:5px;text-align:right"> <a class="my_close" onclick="CloseDiv('popupDiv','maskDiv')">×</a> </div> <div class="container" style="98%" id="popupDivContainer"> <span id="spContent" style="padding:0px 50px 0px 50px;word-break: normal; auto; display: block; white-space: pre-wrap; word-wrap: break-word; overflow: hidden;"></span> </div> </div> </body> </html>
popupWindow.css：
body { } .black_overlay { display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; -moz-opacity: 0.8; opacity: .80; filter: alpha(opacity=70); } .white_content { display: none; position: absolute; top: 10%; left: 10%; width: 80%; height: 80%; border: 2px solid lightblue; background-color: white; z-index: 1002; overflow: auto; } .white_content_small { display: none; position: absolute; top: 20%; left: 30%; width: 40%; height: 50%; border: 16px solid lightblue; background-color: white; z-index: 1002; overflow: auto; } .my_close { width: 24px; height: 24px; line-height: 24px; display: block; position: absolute; left: 10px; top: 10px; font-family: Helvetica, STHeiti; _font-family: 'u9ed1u4f53', 'Book Antiqua', Palatino; font-size: 18px; border-radius: 24px; background: #999; color: #FFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); -moz-transition: linear .06s; -webkit-transition: linear .06s; transition: linear .06s; padding: 0; text-align: center; text-decoration: none; outline: none; } .my_close:hover { color: #FFF; box-shadow: 0 1px 3px rgba(209, 40, 42, .5); background: #d1282a; border-radius: 24px; transition: all 0.2s ease-out; opacity: 0.8; text-decoration: none; }