Question

我知道有一些方法可以显示一个新窗口，固定在屏幕上，而另一部分网站将禁用并在一个黑暗透明的封面下。但我不知道这些方法和技术名称。所以我编写自己的代码来创建类似的东西。 我的问题是，执行此操作的常用方法是什么？这是我的代码...

<!DOCTYPE HTML>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div id="bg_cover">
</div>
<div id="inside_box">
</div>
<div>
    <form>
        <label>
            <input type="button" value="run" onclick="sign_go()">
        </label>
    </form>
</div>
<script>
    function sign_go() {
        document.getElementById('bg_cover').style='z-index:80; background-color:#003399; position:fixed; top:0; left:0; height:100%; width:100%; opacity:0.5;';
        document.getElementById('inside_box').style='z-index:90; background-color:white; position:fixed; left:0; right:0; height:100px; width:300px; margin:auto; margin-top:100px;';
        document.getElementById('inside_box').innerHTML='<form><label><input type="text"><input type="button" onclick="sign_back()"></label></form>';
     }
    function sign_back(){
        document.getElementById('bg_cover').style='';
        document.getElementById('inside_box').style='';
        document.getElementById('inside_box').innerHTML='';
    }
</script>
</html>

Answer 1

你要找的东西叫做模态。您可以使用jQuery或纯CSS创建它。请查看以下文章以创建模型。

查看此文章以创建jQuery Modal

或纯CSS3 Modal

Answer 2

首先，你需要一个固定的元素来覆盖整个页面，并且透明度更高的z-index和display: none;，内容将会进入内部。所以它看起来像：

<div id="center_container">
    <div id="center">
        <div>Some content</div>
        <span id="close_center">X</span>
    </div>
</div>

#center会在此处保留内容，#center_container只会覆盖该页面。

#center_container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: rgba(128, 128, 128, 0.5); /* transparency */
    z-index: 20;
}
#center {
    position: relative;
    margin: 50px auto;
    border-radius: 10px;
}
#close_center {
    position: absolute;
    top: -10px;
    right: -10px;
    cursor: pointer;
}

然后在按钮上单击显示它并设置关闭按钮以关闭它。

jsfiddle DEMO

在＆＃39; onclick＆＃39;上打开一个固定的窗口事件 - javascript＆amp; HTML

2 个答案: