如何創建一個使用JavaScript和CSS一個模式彈出

Question

其實，有兩個問題：

• 我怎樣才能創建的灰色背景色模式彈出？
• 此外，我需要創建一個封面背景顏色只對表本身。不是整體頁面。

我該如何使用javascript和css來做到這一點？

Answer 1

這裏是HTML，它應該可以插入到JS中，並且樣式應該放在外部樣式表中。

<div style="background: gray; width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px" id="modal">I'm a modal</div> 

然後，你可以利用jQuery來顯示它。

$('a.modal').bind('click', function(event) { 
    event.preventDefault(); 
    $('#modal').fadeIn(800); 
}); 

這只是一個開始，你會想要從中學習並建立它。例如，腳本應該檢查is(':hidden')並顯示，如果不是則與fadeOut(800)或類似。

Answer 2

我用這個在顯示屏

.Mask { 
    display: none; 
    width: 100%; 
    height: 100%; 
    z-index: 9000; 
    padding: 0px; 
    margin: 0px; 
    background: transparent url(http://i.imgur.com/0KbiL.png); 
    position: fixed; 
    top: 0px; 
    overflow: hidden; 
}