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 able to open a div and have the background of the page go transparent grey like the photo below and have my div be on top of it, that is all I need to do so I would like to write some jQuery to do this instead of using a bulky plugin. Does anyone have any small code that can do this task? Is the transparent background an image or just CSS?

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

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

Answer 4

You can create a simple modal using pure HTML and css,no need of javascript and jquery,which will indirectly reduce time and work.

html-->
    <a href="#openModal">Open Modal</a>

   <div id="openModal" class="modalDialog">
   <div>    <a href="#close" title="Close" class="close">X</a>

        <h2>Modal Box</h2>

    <p>This is a sample modal box that can be created using the powers of CSS3.</p>
    <p>You could do a lot of things here like have a pop-up ad that shows when your    website loads, or create a login/register form for users.</p>
   </div>
    </div>

      css-->

   .modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
 }
 .modalDialog:target {
 opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}

visit this.

Answer 5

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 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.