彈出窗口處於活動狀態時，如何使背景模糊？

當我的彈出窗口處於活動狀態時，我喜歡使背景變暗或模糊。
彈出窗口必須保持不變，只有完整的背景必須是黑色的。
我更喜歡在頁面前添加一個黑色圖層。
我必須在任何網站上工作，所以當我在任何網站上包含此腳本時，它必須工作。
彈出窗口處於活動狀態時，如何使背景模糊？

所有代碼必須在javascript中進行製作。
當我關閉彈出窗口時，頁面必須再次正常，就像我的代碼一樣。
使用我的代碼進行編輯。

window.onload = addElement; 
 

 

 

 
function addElement() { 
 
    // create a new div element 
 
    // and give it popup content 
 
    var newDiv = document.createElement("div"); 
 
    var texts = 'erd'; 
 
    newDiv.innerHTML += '<div id="popup" style=" position: absolute;top: 5%;width: 800px;height: 200px;margin: auto;z-index: 99999;display: block;left:25%;background-color: #fff; border: 1px solid #ddd; border-radius: 5px; box-shadow: 0 1px 6px 4px #000; overflow: hidden; padding: 10px;"><div class="popup_body" style=" height: 160px;">' + texts + '</div><button style="padding: 10px;" class="close_button"onClick="closePopup()">Sluiten</button><button style="padding: 10px;" class="close_button"onClick="tostoring()">Meer Informatie</button></div>'; 
 

 
    // add the newly created element and its content into the DOM 
 
    var currentDiv = document.getElementById("main_container"); 
 
    document.body.insertBefore(newDiv, currentDiv); 
 

 
    // open popup onload 
 
    openPopup(); 
 
} 
 

 
function openPopup() { 
 
    var el = document.getElementById('popup'); 
 
    el.style.display = 'block'; 
 
    var BG = document.createElement("div"); 
 
    //BG.style.background-color = 'black'; 
 
    BG.style.width = '100%'; 
 
    BG.style.height = '100%'; 
 
    
 
    
 
} 
 

 
function tostoring() { 
 
window.location.href = '../testing/storing.php'; 
 
    
 
} 
 

 

 

 
function closePopup() { 
 
    var el = document.getElementById('popup'); 
 
    el.style.display = 'none'; 
 
    
 
}

teefsffstfssgrhhsggsrhservgssfvrhthtrdg rthsgssdsgsssssgegdgssstyygghdeeffsdfsfsdgtrhhfhtrrthsgssdsgsnjissgegdgss 
 
sdrfdsdeeffsdfsfsdgtrhhfhtrrthsgssd 
 

 
sgsgfksgegdgssjhsssdeeffsdfsfsdgtrhhfhtrrthsgssdsgsstrsgegdgssuiopssdeeffsdfsfsdgtrhhfhtrrthsgssdsgsesrrressgegdgssslkkjsdeeffsdfsfsdgtrhhfhtrvvvtkiyoyuirt

來源

2016-12-15 Jelle Botman

在這裏你去：

window.onload = addElement; 
 

 

 

 
function addElement() { 
 
    // create a new div element 
 
    // and give it popup content 
 
    var newDiv = document.createElement("div"); 
 
    var texts = 'erd'; 
 
    newDiv.innerHTML += '<div id="popup" style=" position: absolute;top: 5%;width: 800px;height: 200px;margin: auto;z-index: 99999;display: block;left:25%;background-color: #fff; border: 1px solid #ddd; border-radius: 5px; box-shadow: 0 1px 6px 4px #000; overflow: hidden; padding: 10px;"><div class="popup_body" style=" height: 160px;">' + texts + '</div><button style="padding: 10px;" class="close_button"onClick="closePopup()">Sluiten</button><button style="padding: 10px;" class="close_button"onClick="tostoring()">Meer Informatie</button></div>'; 
 

 
// Add The Background cover 
 
    var BG = document.createElement("div"); 
 
    //BG.style.background-color = 'black'; 
 
    BG.style.width = '100%'; 
 
    BG.style.height = '100%'; 
 
    BG.style.background = 'black'; 
 
    BG.style.position = 'fixed'; 
 
    BG.style.top = '0'; 
 
    BG.style.left = '0'; 
 
    BG.style.opacity = '0.9'; 
 
    BG.style.displpay = 'none'; 
 
    BG.setAttribute("id", "bgcover"); 
 
    
 
    // add the newly created elements and its content into the DOM 
 
document.body.appendChild(BG); 
 
document.body.insertBefore(newDiv, BG); 
 
    // open popup onload 
 
    openPopup(); 
 
} 
 

 
function openPopup() { 
 
    var el = document.getElementById('popup'); 
 
    var BG = document.getElementById('bgcover'); 
 
    el.style.display = 'block'; 
 
    BG.style.display = 'block'; 
 
    
 
    
 
    
 
} 
 

 
function tostoring() { 
 
window.location.href = '../testing/storing.php'; 
 
    
 
} 
 

 

 

 
function closePopup() { 
 
    var el = document.getElementById('popup'); 
 
    var BG = document.getElementById('bgcover'); 
 
    el.style.display = 'none'; 
 
    BG.style.display = 'none'; 
 
}

<body> 
 
    teefsffstfssgrhhsggsrhservgssfvrhthtrdg rthsgssdsgsssssgegdgssstyygghdeeffsdfsfsdgtrhhfhtrrthsgssdsgsnjissgegdgss 
 
sdrfdsdeeffsdfsfsdgtrhhfhtrrthsgssd 
 

 
sgsgfksgegdgssjhsssdeeffsdfsfsdgtrhhfhtrrthsgssdsgsstrsgegdgssuiopssdeeffsdfsfsdgtrhhfhtrrthsgssdsgsesrrressgegdgssslkkjsdeeffsdfsfsdgtrhhfhtrvvvtkiyoyuirt 
 
</body>

來源

2016-12-15 15:38:25 Guitaro

感謝@Guitaro：d –

只有當彈出處於活動狀態時可以降低背景透明度。

Background-color:rgba(0,0,0,0.4);

來源

2016-12-15 15:09:47

這沒有什麼關係，它沒有幫助:( –

彈出窗口處於活動狀態時，如何使背景模糊？

回答

相關問題