Question

我需要在纯JS中创建一个脚本，以便在加载页面时显示弹出窗口后台需要褪色，我必须将自己的内容添加到弹出窗口中。我不想使用CSS或HTML 将CSS和HTML放入Javascript代码中。有人可以帮我这个吗？我可以自己做造型。
我只能使用外部CSS和HTML制作弹出窗口，而不是纯JS。它只能是一个用纯JS编写的简单弹出窗口，它会在页面加载时弹出。

请帮帮我!!

我更喜欢使用JSFiddle。

Answer 1

更新回答：

你可以简单地使用css的display样式属性和使用css的按钮隐藏/显示onClick样式的popup。

更新

在DOM中添加popup占位符元素
为弹出窗口添加css - 请参阅答案
使用JS的innerHTML属性添加pop DOM，并且需要JS用于show / hide弹出

如下所示 -

document.body.onload = addElement;

function addElement () { 
  // create a new div element 
  // and give it popup content 
  var newDiv = document.createElement("div"); 
  newDiv.innerHTML +='<button class="open_button" onClick="openPopup()">Open Popup</button><div id="popup" style="  position: absolute;width: 300px;z-index: 999;display: none;top:0;background-color: #fff;  border: 1px solid #ddd;  border-radius: 5px;  box-shadow: 0 2px 8px #aaa;  overflow: hidden;   padding: 10px;"><div class="popup_body" style="  height: 100px;">This is sample popuup</div><button class="close_button"onClick="closePopup()">close</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';
  
  // Updates: set window background color black
  document.body.style.background = '#353333';
}

function closePopup() {
  var el = document.getElementById('popup');
  el.style.display = 'none';
  document.body.style.background = 'white';
}

希望这会以某种方式帮助你（y）。

如何使用纯JS制作弹出脚本？

1 个答案:

更新