在javascript中阻塞一個簡單的模態對話框的背景

我有一個簡單的JavaScript模式對話框，我自己創建。 CSS的是以下幾點：在javascript中阻塞一個簡單的模態對話框的背景

#overlay { 
    visibility: hidden; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width:100%; 
    height:100%; 
    text-align:center; 
    z-index: 1000; 
    background-color: rgba(0, 0, 0, 0.6); 
} 

#show { 
    width:300px; 
    margin: 100px auto; 
    background-color: #fff; 
    border:1px solid #000; 
    padding:15px; 
    text-align:justify; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 14px; 
    font-weight: bold; 
    line-height: 20px; 
}

的JavaScript如下：

function overlay() { 
    var el = document.getElementById("overlay"); 
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible"; 
    if (el.style.visibility == "visible"){ 
     el.scrollIntoView(); 
    } 
}

這個問題我已經是大於它似乎。我從網上取得了這個模式對話框代碼，只用javascript和css做了一個簡單的模式，但是我想要構建一個完整的模式窗口，這個窗口占用了broser中可以看到的100％的空間，但是如果向下滾動，你可以看到覆蓋層後面仍然存在的頁面，導致覆蓋層不佔用網頁的100％，而只有用戶可以看到的部分的100％。

當用戶向下滾動覆蓋圖時，是否必須抑制行爲？我怎樣才能做到這一點？

任何提示？謝謝。

來源

2013-10-23 softwareplay

你有沒有考慮過爲你的模態使用Bootstrap？ http://getbootstrap.com/javascript/#modals – bzupnick

它是簡單的，只是改變了覆蓋的CSS：

#overlay { 
    position: fixed; 
    overflow: auto; 
    ... 
}

然後在javascript函數添加這些線（外的「如果」語句）：

var b = document.getElementsByTagName("body")[0]; 
b.style.overflow = (b.style.overflow == "") ? "hidden" : "";

來源

2013-10-23 10:02:58 softwareplay

可以這樣做：

$('#overlay').height($(document).height());

或給予固定

疊加位置0

#overlay{ 
position:fixed; 
}

來源

2013-10-23 10:06:34

在javascript中阻塞一個簡單的模態對話框的背景

回答

相關問題