How to make a popup script with pure JS? [closed]

问题

I need to make a script in pure JS for showing an popup when the page is loaded.
The background needs to be faded and i have to add my own content into the popup. I don't want to use CSS or HTML.
Put the CSS and HTML into the Javascript code. Can someone help me with this?
I can do styling on my own.
I can only make an popup with external CSS and HTML, not pure JS. It only must be a simple popup written in pure JS en it pops up when the page is loaded.

Please help me!!

I prefer the use of JSFiddle.

回答1:

Updated answer:

You can simply use display style property of css and on onClick of button hide/show popup style using css.

Updates

add popup placeholder element in DOM
add css for popup - see css provided in answer
add pop DOM using innerHTML property of JS and required JS for show/hide popup

Something like below -

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

Hope this will help you in some way (y).

来源：https://stackoverflow.com/questions/41124861/how-to-make-a-popup-script-with-pure-js

标签

javascript

css

popup