Simple modal div in jQuery?

Question

I have tried almost all of the jQuery Modal plugins I can find on the net but they are all much to bulky for what I need. I don\'t need all the fancy features, I want to be

Answer 1

To name another plugin for this task is nyromodal which I find easy to use but still offers a lot of setting options if you should find yourself in the need for that (later)

Answer 2

You can use jQuery UI which has a dialog plugin that supports modal .. http://jqueryui.com/demos/dialog/#modal

Alternatively you would create a div that spans the whole viewport in size, set its opacity to 50% (0.5) and also catch and stop all events to make it modal. Then display your div on top of it ..

Answer 3

This is what I use myself; it looks nice, the code is simple and easy to understand, and uses minimal CSS and jQuery.

Here is the code (And a fiddle to see it in action: http://jsfiddle.net/cadkJ/125/):

HTML

<h1>Bacon ipsum dolor sit amet</h1>

<p>Magna adipisicing eu, pig ex pariatur non biltong nisi consequat do exercitation. Biltong exercitation consequat aute. Excepteur velit ribeye, et salami pariatur sed consequat enim ham. Tenderloin consequat et, in pastrami aute meatloaf beef spare ribs tri-tip beef ribs sed ut jerky strip steak. Fugiat turkey shank frankfurter pork loin pastrami.</p>

<button id="modal-launcher">Launch Modal Window</button>

<div id="modal-background"></div>
<div id="modal-content">
    <button id="modal-close">Close Modal Window</button>
</div>​

CSS

#modal-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: .50;
    -webkit-opacity: .5;
    -moz-opacity: .5;
    filter: alpha(opacity=50);
    z-index: 1000;
}

#modal-content {
    background-color: white;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    box-shadow: 0 0 20px 0 #222;
    -webkit-box-shadow: 0 0 20px 0 #222;
    -moz-box-shadow: 0 0 20px 0 #222;
    display: none;
    height: 240px;
    left: 50%;
    margin: -120px 0 0 -160px;
    padding: 10px;
    position: fixed;
    top: 50%;
    width: 320px;
    z-index: 1000;
}

#modal-background.active, #modal-content.active {
    display: block;
}​

jQuery

$(function(){
    $("#modal-launcher, #modal-background, #modal-close").click(function() {
        $("#modal-content, #modal-background").toggleClass("active");
    });
});

---

Do you want to lock scrolling?

Add the following CSS rule:

body.active { position: fixed; overflow: hidden; }

Replace the jQuery function with: (body added to line 3)

$(function(){
    $("#modal-launcher, #modal-background, #modal-close").click(function() {
        $("body, #modal-content, #modal-background").toggleClass("active");
    });
});

Do you want to prevent click events on the background from closing the modal?

Replace the jQuery function with: (#modal-background removed from line 2)

$(function(){
    $("#modal-launcher, #modal-close").click(function() {
        $("#modal-content, #modal-background").toggleClass("active");
    });
});

Answer 4

I've been using the jQuery UI Dialog for this. http://jqueryui.com/

Answer 5

SimpleModal does precisely what you want to do.

Answer 6

EDIT: This is obviously outdated. So please refer to Andrew Odri post below.

I don't know how good you are in CSS and JavaScript, but your request shouldn't be that hard to do yourself.

body, html { margin:0; padding:0; }
#modalTabelGray
{
    position:absolute;
    width:100%;
    height:100%;
    background-color:#000000;
    filter:alpha(opacity=60);
    opacity:0.6;
    -moz-opacity:0.6;
    z-index:100;

    text-align:center;
    vertical-align:middle;
}

#modalDiv
{
    position:absolute;
    z-index:101;
}

I haven't tested the code, might not work, but you'll get the idea.