Question

I seen many jquery plugins that do this and I am wondering if anyone knows how to do it(It would save me alot of time).

When you load up say the jquery ui dialog.

It pops up all flashy and the the background darkens.

http://jqueryui.com/demos/dialog/#modal

http://jreject.turnwheel.com/# (run any of the demos)

I think they use jquery fade in and out. But I am not sure. Probably most of the effects are from sort of css with a zindex.

Answer 1

A simply <div> that’s the max size of the screen is the basis of it, for example here’s blockUI‘s version:

<div style="z-index: 1000; border: none; margin: 0; padding: 0; width: 100%; height: 100%; top: 0px; left: 0px; background-color: rgb(0, 0, 0); cursor: wait; position: fixed; opacity: 0.6; "></div>

Here’s a minimalist demo showing it in action