如何用纯 JS 制作弹窗脚本？ [关闭]

Question

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

请帮帮我！！

我更喜欢使用 JSFiddle。

Answer 1

更新答案：

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

更新

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

• 为弹出窗口添加 css - 请参阅答案中提供的 css

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

类似下面的东西 -

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