Modal Dialog without jQuery

Question

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 1

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/

Solution 2

I created a library called tomloprodModal that does what you need. It's a simple and configurable javascript library to create responsive and minimalist modal windows with no dependencies.

I hope it helps you.

---

Installation:

Just download and add the tomloprodModel.css and tomloprodModel.js to your website.

You can use bower too: bower install tomloprodModal or using npm: npm install tomloprodModal

---

Initialization:

Javascript:

TomloprodModal.start({
    closeOut: true,
    bgColor: "#FFFFFF",
    textColor: "#333333"
});

Example of modal window:

<div class="tm-modal tm-effect tm-draggable" id="logInPopUp">
    <div class="tm-wrapper">
        <div class="tm-title">
            <span class="tm-XButton tm-closeButton"></span>  
            <h3 class="tm-title-text">Lorem Ipsum...</h3> 
        </div>
        <div class="tm-content" >
            <div style="text-align:center">
                <img width="250" src="http://s3.favim.com/orig/47/animal-cat-cute-kitty-surprise-Favim.com-434324.jpg"/>
            </div>
            <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.
            </p>
        </div>
    </div>
</div>

---

Result:

Or, you can create the modal window without any HTML:

TomloprodModal.create({
    bgColor: "#FFFFFF",
    textColor: "#333333",
    title: "Hi!",
    content: "Nothing to say",
    closeTimer: 1000
});

---

Documentation:

https://github.com/tomloprod/tomloprodModal

---

Demo:

http://codepen.io/tomloprod/pen/kkYxWY

Comments

[Alexis Paques]

There is ModaliseJS, lightning fast, with no dependencies and do only what it is supposed to.

[tomloprod]

github.com/tomloprod/tomloprodModal

[Val]

There are two problems with this solution. At first, you must choose a background color. Otherwise, you will get a mess with transparent color. I do not know how to solve the second. Here is an example of your proposed solution. Scroll down, below the window. You see that your "window" spans not longer than the screen height. The mess appears below eventhough background was set to lightgray color. The background does not cover the whole overlapped page. Might be we should replace the body. BTW, this is known as glass pane method.

[MikeB]

Shouldn't it be position: fixed;? To attach the overlay to the window rather than the document. - jsbin.com/kepahehino/edit?output

[Sildoreth]

If you might "take down the file" at any time, then this answer may become obsolete at any time.

[Russell Chisholm]

This is great, however when I use this I get this error: TypeError: Cannot read property 'addEventListener' of null @ Object.openModal; however it still works.

[Russell Chisholm]

I have a huge amount of HTML... what is happening is there is no .tm-overlay element. I didn't add one; maybe it was something I missed in the documentation.

[webs]

good effort but is not able to replace js confirm. It does not suspend activity waiting selection.