Search code examples
javascriptjquerydialoginternet-explorer-9

Modal Dialog without jQuery

I need to create a modal dialog on a webpage using javascript. Normally this would be easy as I could use something like jQueryUI or BlockUI, but the caveat here is that I'm not permitted to use jQuery, and I need to support IE9 quirks mode (ie no html5 doctype). I can't find anything online pertaining to what I need. Would anyone have suggestions? Thanks.

Solution

  • 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/