Modal Dialog without jQuery

by

What about doing overlay with a div centered in the middle?

You can have div which you can hide (using javascript):

 <div id="overlay">
  <div>
      <p>Content you want the user to see goes here.</p>
  </div>
 </div>

The CSS style for overlay can look like this:

 #overlay {
    visibility: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    width:100%;
    height:100%;
    text-align:center;
    z-index: 1000;
 }

Then you can use JavaScript to switch the visibility of the content in the overaly div:

 function overlay() {
    el = document.getElementById("overlay");
   el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
 }

More for example here: http://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/

More Related Contents:

  1. Can you wait for javascript callback?
  2. Custom “confirm” dialog in JavaScript?
  3. IE9: Why setting “-ms-transform” works from css, but not with jquery.css()
  4. CSS or jQuery : How to get visible top [duplicate]
  5. Write tags in HTML and print
  6. Get this error: “Uncaught TypeError: Cannot read property ‘0’ of undefined”
  7. How can I determine the direction of a jQuery scroll event?
  8. Dynamically load JS inside JS [duplicate]
  9. Allow Google Chrome to use XMLHttpRequest to load a URL from a local file
  10. AngularJS – Any way for $http.post to send request parameters instead of JSON?
  11. How to detect window.print() finish
  12. Create array of unique objects by property
  13. What is difference between width, innerWidth and outerWidth, height, innerHeight and outerHeight in jQuery
  14. (Deep) copying an array using jQuery [duplicate]
  15. convert Hsl to rgb and hex
  16. how to convert this nested object into a flat object?
  17. Replace only text inside a div using jquery
  18. jQuery Deferred and Dialog box
  19. Convert Hex to RGBA
  20. JavaScript reduce the size and quality of image with based64 encoded code
  21. Javascript Code works in jsfiddle and but not in the Browser [closed]
  22. How to trim() white spaces from a string?
  23. JavaScript event registering without using jQuery
  24. How to unbind a specific event handler
  25. HTML5 responsive canvas: resizing the browser canvas draw disappear
  26. How to select an element loaded through the jQuery load() function?
  27. How do I detect the inherited background-color of an element using jQuery/JS?
  28. How to catch net::ERR_CONNECTION_REFUSED
  29. Prevent ajax call from firing twice
  30. JavaScript runtime error: ‘$’ is undefined

Leave a Comment