jquerycssmodal-dialog

Simple modal div in jQuery?


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?


Solution

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