Splash screen on web page in Javascript

Question

I need to add a splash screen on a web page. I mean a modal image over the site that I can close with a "x" on top-right corner after which I can continue navigation. I would like to use Javascript as solution because I'm not a web developer and I would not study css, jquery etc. Can u help me? Thank you

Answer 1

You can use this simple tutorial to include the modal that you want. Just modify it accordingly: css/js modals

Another manner is to use Bootstrap modal. It's a really easy to use and a very funny to learn Javascript Library. Some documentation for the modal is in this link .

Answer 2

Insert the below code and you should be sweet. You will probably have to do some styling yourself, but here is a template.

document.addEventListener('DOMContentLoaded', function() {

  /*
   *  Create overlay element
   */
  var overlay = document.createElement('div');
  overlay.innerHTML = " ";

  //set overlay style
  overlay.style.width="100%";
  overlay.style.height="100%";
  overlay.style.backgroundColor="black";
  overlay.style.position="fixed";
  overlay.style.opacity="0.5";


  /*
   *   Create modal wrapper element
   */
  var element = document.createElement('div');

  //set styles to wrapper element
  element.style.backgroundColor = "#fff";
  element.style.height="300px";
  element.style.width="400px";
  element.style.position="fixed";
  element.style.marginTop="100px";
  element.style.left="50%";
  element.style.transform="translateX(-50%)";

  /*
   *   Create top bar element contaning X for closing
   */
  var topbarElement = document.createElement('div');

  //Set style
  topbarElement.style.width = "100%";
  topbarElement.style.cursor = "pointer";
  topbarElement.style.textAlign="right";
  topbarElement.innerHTML = "X";

  //Add event listener for removing the element
  topbarElement.addEventListener('click', function() {
    document.body.removeChild(element);
        document.body.removeChild(overlay);
  });

  //Add top bar element to wrapper element
  element.appendChild(topbarElement);

  /* 
   * Create content element
   */
  var contentElement = document.createElement('div');

  //set content of content element
  contentElement.innerHTML = "YOUR MODAL CONTENT HERE";

  //Add content element to wrapper element
  element.appendChild(contentElement);

  /*
   *   Add wrapper and overlay element to html body
   */
  document.body.insertBefore(element, document.body.childNodes[0])
  document.body.insertBefore(overlay, document.body.childNodes[0])

});

JSBin example: http://jsbin.com/kumigihobo/edit?js,output