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

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

Bacon ipsum dolor sit amet

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.

Launch Modal Window



    Close Modal Window
​

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");
    });
});