Page 1 of 1
Creating Modal block, overlay effects with jQuery
Posted: Tue Mar 01, 2011 4:25 am
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.
Re: Creating Modal block, overlay effects with jQuery
Posted: Tue Mar 01, 2011 10:55 am
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.
Re: Creating Modal block, overlay effects with jQuery
Posted: Sun Mar 06, 2011 8:15 am
by phazorRise
Its working well bt IE doesn't support it well. Any clue?
Re: Creating Modal block, overlay effects with jQuery
Posted: Mon Mar 07, 2011 9:45 am
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.