弹出窗口处于活动状态时如何使背景模糊？
[英]How can I make the background blur when the popup is active?
问题描述
我喜欢在弹出窗口处于活动状态时使背景变暗或模糊。
弹出窗口必须保持不变，只有整个背景必须是黑暗的。
我更喜欢在页面前面添加一个深色层。
我必须在任何网站上工作，所以当我在任何网站上包含此脚本时，它都必须工作。
所有代码都必须使用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
2 个解决方案
解决方案1
1 已采纳 2016-12-15 15:38:25
干得好：
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>
解决方案2
0 2016-12-15 15:09:47
仅当弹出框处于活动状态时，才能降低背景不透明度。
Background-color:rgba(0,0,0,0.4);
单击外部背景div时如何退出弹出式联系表单？
[英]How do I make a popup contact form exit when clicking the external background div?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.