Question

当我的弹出窗口处于活动状态时，我喜欢让背景变暗或模糊弹出窗口必须保持不变，只有完整的背景必须是黑暗的我更喜欢在页面前添加一个暗层。
我必须在任何网站上工作，所以当我在任何网站上都包含这个脚本时，它必须有效。

所有代码必须用javascript制作当我关闭弹出窗口时，页面必须再次正常，就像在我的代码中一样使用我的代码进行编辑。

＆＃13;

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';
 
}

＆＃13;

teefsffstfssgrhhsggsrhservgssfvrhthtrdg rthsgssdsgsssssgegdgssstyygghdeeffsdfsfsdgtrhhfhtrrthsgssdsgsnjissgegdgss
sdrfdsdeeffsdfsfsdgtrhhfhtrrthsgssd

sgsgfksgegdgssjhsssdeeffsdfsfsdgtrhhfhtrrthsgssdsgsstrsgegdgssuiopssdeeffsdfsfsdgtrhhfhtrrthsgssdsgsesrrressgegdgssslkkjsdeeffsdfsfsdgtrhhfhtrvvvtkiyoyuirt

＆＃13;

Answer 1

你走了：

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>

Answer 2

只有在弹出窗口处于活动状态时，才能降低背景不透明度。

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

当弹出窗口处于活动状态时，如何使背景模糊？

2 个答案: