CODEWITHSUNDEEP
jquery
santa
santa

Reputation: 12512

writing modal pop-up with jQuery

I'm trying to understand how modal windows work. I know, there are multiple plug-ins out there but I'd like to write my own -- a simple one.

-- I can add a jquery function to show() hidden layer when some element is clicked on a page.

-- I can make it load above the page content but tweaking CSS, but I'm still not sure how to do couple of things.

For example, how do I make the rest of the page fade below the window?

Thanks.

Upvotes: 2

Views: 608

Answers (2)

Josiah Ruddell
Josiah Ruddell

Reputation: 29841

You have to use another layer between the modal content, and the rest of the page. This is normally called an overlay. The overlay is colored black or white (normally) and is slightly opaque.

For best results set

body, html      { width: 100%; height: 100% }

So that the overlay will not be restricted by the size of the body/html. 

div.overlay     { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 12000 }

Then append the overlay:

var overlay = $('<div />').css({opacity: '.8' }).addClass('overlay');
$('body').append(overlay);

Where you start to run into problems is in older browsers such as IE 6 that show dropdown list on top of z-index controlled elements. For this you have to use a hidden iframe technique under the content.

Upvotes: 1

wsanville
wsanville

Reputation: 37516

Take for example what jQuery's dialog does. It uses a div element with an explicit width and height set (dynamically computed via the Javascript), and is absolutely positioned to the top left. To get the faded effect, a background image with opacity is set (for IE, apply filter: alpha(opacity = 50); also).

Markup:

<div class="ui-widget-overlay" style="width: 1263px; height: 1274px; z-index: 1003;"></div>

CSS:

.ui-widget-overlay 
{
    background-image: url('path/to/dark-image.png');
    opacity: 0.5;
    left: 0;
    position: absolute;
    top: 0;
}

Upvotes: 1

Related Questions