Javascript 模态窗口-优快云博客

本文介绍了一种使用HTML、CSS及JavaScript实现遮罩层的方法。通过设置遮罩层的可见性、位置、尺寸等属性，使得页面可以在不离开当前视图的情况下显示额外的内容。文章还提供了交互功能，允许用户轻松地打开和关闭遮罩层。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
    <script language="javascript">
        function overlay() {
            xyz = document.getElementById("overlay");
            xyz.style.visibility = (xyz.style.visibility == "visible") ? "hidden" : "visible";
        }
    </script>
    <style type="text/css">
        #overlay {
             visibility: hidden;
             position: absolute;
             left: 0px;
             top: 0px;
             width:100%;
             height:100%;
             text-align:center;
             z-index: 1000;
             background-color:gray;
             opacity: 0.8; /*FireFox*/
             filter:alpha(opacity=80); /*IE*/
             -moz-opacity: 0.8;

           }
        #overlay div {
             width:300px;
             margin: 100px auto;
             background-color: #fff;
             border:1px solid #000;
             padding:15px;
             text-align:center;
            }
        }
    </style>

</head>
<body>
   <div id="overlay">
     <div>
          Click here to [<a href='#' onclick='overlay()'>close</a>]
          <p>Content</p>
          <p><input type="button" value="Submit" /></p>
     </div>

</div>

    <input type='button' value='show modal dialog' onclick='overlay()' />
</body>
</html>