ansaurus

Question

Simple modal div in jQuery?

Answer 1

+1 A:

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

orthod0ks 2010-01-20 12:50:34

Answer 2

+1 A:

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

Gaby 2010-01-20 12:51:17

Answer 3

+3 A:

I would NOT recommend jQuery UI - it's huge and overcomplex for that simple task. Here are some other plugins:

Kordonme 2010-01-20 12:54:35

Yeah I will not use jqueryUI but I also want to stay away from other main ones liek you listed, they are "light weight" but not light weight enough for my needs

jasondavis 2010-01-20 13:53:18

I will say the http://malsup.com/jquery/block/ I have not seen before and it is pretty nice!

jasondavis 2010-01-20 13:55:24

I listed just some of the plugins that exists. Just google "jquery modal" and you will find lots of them. Some more complex than other :-)

Kordonme 2010-01-20 21:06:22

Answer 4

+5 A:

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.

Eibx 2010-01-20 12:58:55

if this works, this is basicly what I needed help with is the css part

jasondavis 2010-01-20 13:52:24

I haven't testet it, but as said, it shouldn't be that hard to make. The most important part, is that you don't nest the div in the div with opacity, because then the content will also become transparent. You can use a transparent PNG, instead if you like.

Eibx 2010-01-20 13:57:05

I think creating your own version could be a good idea. I will work for the first 2-3 tasks you want completed. But later on, you need it to be more complex. My experience tells me, that it will end up being more messy and end up being larger, than some of the other plugins out there. There are tons of them :-)

Kordonme 2010-01-20 21:04:58

Actually I have only good experience with creating my own, they become just as lightweight as I want them, and I'm sure they don't conflict with other libraries I might use. But I do still agree with you, there are a lot of good plugins out on the internet, and things can get ugly when you create them yourself.

Eibx 2010-01-21 07:55:05

Answer 5

A:

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)

harpax 2010-01-20 20:29:34

Answer 6

+2 A:

SimpleModal does precisely what you want to do.

David Robbins 2010-05-18 12:37:05

ansaurus

tags:

views:

answers:

Simple modal div in jQuery?

related questions