2015-05-26 69 views
2

我知道有一種方式可以顯示一個新窗口,固定在屏幕上,而另一部分網站會禁用並在黑暗和透明的封面下。但是我不知道這些方法和技巧名稱。所以我寫我自己的代碼來創造類似的東西。 我的問題是,這樣做的常用方法是什麼?這裏是我的代碼...
在'onclick'事件上打開一個固定窗口 - JavaScript&html

<!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> 
+3

嘗試搜索jQuery的模態 – Sushil

+2

模式......... – Spechal

回答

1

首先,你需要一個固定的元素,以覆蓋整個頁面,是透明的具有較高的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

+0

簡單,短暫的...好! TNX ... – Sonoo

1

你正在尋找的東西叫做莫代爾。您可以使用jQuery或純CSS來創建它。看看下面的文章來創建模型。

看看這篇文章,以創建jQuery Modal

或純CSS3 Modal