由于浏览器默认的小窗口可能不太美观，所以需要我们自己去写一个，首先设计好这个小窗口的尺寸以及样式，然后为其添加必要的按钮。在父窗口上点击时触发事件使其弹出在窗口自己想要的位置上。
有时候可能需要弹出小窗口时让父窗口有一层透明度，且父窗口不可操作。那么可以在父页面与弹出窗口之间加入一个和父窗口一样大小的页面，用 index 确定他们三者之间的层级关系。然后用display：none使其隐藏，当触发了某些事件弹出小窗口时，使其显示。
小窗口都有关闭按钮，当点击关闭按钮时触发事件，使小窗口和中间那层有透明度的窗口隐藏。
这样一个自定义的小窗口就显示出来了。
接下来附上本人的源代码，关于样式定义可能有些繁琐，但是希望可以对需要的人有点帮助：
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>showDialog</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } #dialog{ z-index: 1; background: lightgreen; width: 800px; height: 600px; margin: 0 auto; } #dialog .textdiv span{ font-size: 20px; color: red; font-weight: bold; padding-top: 100px; padding-left: 100px; } #dialog .textdiv .testbutton:hover{ background: red; } #mid{ margin-top: 0px; position: absolute; z-index: 2; width: 800px; height: 600px; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; } .button{ position: fixed; background: #FAEE1C; height: 60px; width: 150px; border:2px dotted red; text-align: center; margin: 300px 300px; } #pop_frame{ position: absolute; z-index: 3; height:180px; width: 350px; position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; } .frame_top{ height:50px; background: #40A798; } .frame_top .tip{ font-size: 16px; line-height: 50px; padding-left: 20px; font-weight: bold; font-family: "微软雅黑"; float: left; } .frame_top .close span{ position: relative; top:19px; right: 20px; height: 20px; width: 30px; border:1px solid #FFF; font-size: 12px; font-family: "微软雅黑"; float: right; line-height: 20px; } .frame_top .close span:hover{ cursor:pointer; background: rgba(128,128,128,0.3); } .frame_body{ height: 90px; background: #F5E1DA; } .frame_body .text{ padding-top: 30px; font-size: 16px; padding-left: 100px; font-weight: bold; font-family: "微软雅黑"; } .bottom{ height: 40px; background: #F5E1DA; } .button_left{ width: 45px; height: 28px; margin-left:80px; background: #40A798; font-size: 16px; font-weight: bold; font-family: "微软雅黑"; } .button_right{ width: 45px; height: 28px; margin-left:80px; background: #40A798; font-size: 16px; font-weight: bold; font-family: "微软雅黑"; } </style> </head> <body> <!--弹出窗口，默认其不显示，即display:none--> <div id = "pop_frame" style="display:none"> <!--弹出窗的头部--> <div class = "frame_top"> <span class = "tip">提示框</span> <div class = "close" οnclick="close_pop()"><span>关闭</span></div> </div> <!--弹出框内容区--> <div class = "frame_body"> <div class = "text">这是一个弹出窗口？</div> </div> <!--弹出框底部用来放置按钮--> <div class="bottom"> <input type = "button" class = "button_left" οnclick="#" value="Yes"> <input type = "button" class = "button_right" οnclick="#" value="No"> </div> </div> <!--在父窗口之上层叠了一层页面，用于弹出窗口时父窗口有一层朦胧的感觉--> <div id = "mid" style="display:none"></div> <!--父窗口，添加了文字和按钮--> <div id = "dialog"> <div class = "textdiv"> <span> 这有一段文字</span> <input type="button" class = "testbutton" value="点不动我"> </div> <input type = "button" class = "button" onclick = "showDialog()" value="点我弹出对话框"> </div> <!--script代码--> <script type="text/javascript"> function showDialog(){ var dialog = document.getElementById("pop_frame").style.display; if(dialog == 'none'){ document.getElementById("pop_frame").style.display = 'block'; var middiag = document.getElementById("mid"); middiag.style.display = "block"; middiag.style.background = "rgba(128,128,128,0.3)"; } if(dialog == "block"){ document.getElementById("pop_frame").style.display = 'none'; } } //关闭小窗口，使中间的那层页面和小窗口隐藏，父页面呈现 function close_pop(){ var main = document.getElementById("pop_frame"); main.style.display = "none"; document.getElementById("mid").style.display = "none"; } </script> </body> </html>
