Creating Modal block, overlay effects with jQuery

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
phazorRise
Forum Contributor
Posts: 134
Joined: Mon Dec 27, 2010 7:58 am

Creating Modal block, overlay effects with jQuery

Post by phazorRise »

I want a Login Box to be opened in modal window when user clicks on a link and authentication is done with Ajax.
I tried jQuery BlockUI, jQuery UI, ThickBox. But they are large in scope.
I also tried writing separate plugin for my need but i don't have clear idea how does it work.

So please either suggest a way or give me link to article which is simple to understand and can clear how it work.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Creating Modal block, overlay effects with jQuery

Post by pickle »

There are basically 2 things you need: a "mask" to cover the entire page when the dialog appears, and the dialog itself. You can set the appearance of both in CSS. Just set the mask to be position:absolute, then set the "top", "left", "right", and "bottom" properties to 0. That'll make it fill the whole screen. Give it a "z-index" of 1000 or so. Make your dialog box and position it absolutely. Give it a "z-index" of 1001, so it will appear above the mask. When your event fires, simply show both the mask and dialog.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
phazorRise
Forum Contributor
Posts: 134
Joined: Mon Dec 27, 2010 7:58 am

Re: Creating Modal block, overlay effects with jQuery

Post by phazorRise »

Its working well bt IE doesn't support it well. Any clue?
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Creating Modal block, overlay effects with jQuery

Post by pickle »

There are 4 versions of IE in the wild - each of them have differing levels of CSS & HTML support. This is why libraries based on jQuery are so popular, as jQuery takes care of all the details & inconsistencies in the browser market.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply