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

Question

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

请帮我！！

我更喜欢使用JSFiddle。

Answer 1

更新的答案：

您可以简单地使用displaycss的style属性以及使用css onClick的按钮隐藏/显示popup样式中的on 。

更新

• 在DOM中添加弹出式占位符元素

• 添加CSS以便弹出-请参见答案中提供的CSS

• 使用innerHTMLJS属性和弹出/隐藏弹出窗口所需的JS属性添加弹出式DOM

如下所示-

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）。