Comments on: How to make a completely reusable jquery modal window http://web.enavu.com/tutorials/how-to-make-a-completely-reusable-jquery-modal-window/ Just another WordPress weblog Wed, 18 Jan 2012 08:51:35 +0000 http://wordpress.org/?v=2.9.2 hourly 1 By: MultipleModals? http://web.enavu.com/tutorials/how-to-make-a-completely-reusable-jquery-modal-window/comment-page-1/#comment-30747 MultipleModals? Wed, 25 May 2011 20:50:46 +0000 http://tutsvalley.com/?p=223#comment-30747 What if I want multiple modals where each modal moves "a step" higher and the mask moves to cover it. I got it working with hardcoding some info and then "stepping" the z-index 10 points up and down, but I couldn't come up with a good way to do this dynamically so I could put it on a master page and have all other pages be able to use it. Any suggestions? Thanks in advance. What if I want multiple modals where each modal moves “a step” higher and the mask moves to cover it. I got it working with hardcoding some info and then “stepping” the z-index 10 points up and down, but I couldn’t come up with a good way to do this dynamically so I could put it on a master page and have all other pages be able to use it.

Any suggestions?

Thanks in advance.

]]> By: thiembv http://web.enavu.com/tutorials/how-to-make-a-completely-reusable-jquery-modal-window/comment-page-1/#comment-30609 thiembv Mon, 23 May 2011 16:22:58 +0000 http://tutsvalley.com/?p=223#comment-30609 Thank you very much. Greats Thank you very much. Greats

]]> By: admin http://web.enavu.com/tutorials/how-to-make-a-completely-reusable-jquery-modal-window/comment-page-1/#comment-27724 admin Wed, 13 Apr 2011 16:14:01 +0000 http://tutsvalley.com/?p=223#comment-27724 Hey Mick, You will actually have to take the mask and put it outside the form. The form is positioned relatively so the fixed position of the mask doesn't work when that happens. Hey Mick,

You will actually have to take the mask and put it outside the form. The form is positioned relatively so the fixed position of the mask doesn’t work when that happens.

]]> By: mick http://web.enavu.com/tutorials/how-to-make-a-completely-reusable-jquery-modal-window/comment-page-1/#comment-27695 mick Wed, 13 Apr 2011 12:22:13 +0000 http://tutsvalley.com/?p=223#comment-27695 Having issue with the mask not filling the whole of the page. The site is written in VB.net using master template page and everything goes inside a form. Divs are used to layout the page however I think the stacking order is having an effect on this. The top and left of the mask is taking the top and left from the main content div and not the actual document if you see what I mean. I tried another well known solution for overlay modals and got a similar problem because of the staking issues. This time though it was to do with the mask overlaying everything including the modal box which should be active. Is there a wy around that I can force the mask to work at form level and not sub division level? if I put the code within the master templates then it works because the mask are outside the form so they can reference each other. The form seems to be the big issue here. Any help is really appreciated. TIA Mick Having issue with the mask not filling the whole of the page. The site is written in VB.net using master template page and everything goes inside a form.

Divs are used to layout the page however I think the stacking order is having an effect on this.

The top and left of the mask is taking the top and left from the main content div and not the actual document if you see what I mean.

I tried another well known solution for overlay modals and got a similar problem because of the staking issues. This time though it was to do with the mask overlaying everything including the modal box which should be active.

Is there a wy around that I can force the mask to work at form level and not sub division level?

if I put the code within the master templates then it works because the mask are outside the form so they can reference each other. The form seems to be the big issue here.

Any help is really appreciated.

TIA

Mick

]]> By: Juuso http://web.enavu.com/tutorials/how-to-make-a-completely-reusable-jquery-modal-window/comment-page-1/#comment-23299 Juuso Wed, 16 Feb 2011 15:50:35 +0000 http://tutsvalley.com/?p=223#comment-23299 Dude great job! This is awesome, love how you commentated everything! I'm learning jQuery and this is the best for learning! Dude great job! This is awesome, love how you commentated everything! I’m learning jQuery and this is the best for learning!

]]> By: admin http://web.enavu.com/tutorials/how-to-make-a-completely-reusable-jquery-modal-window/comment-page-1/#comment-17500 admin Wed, 01 Dec 2010 05:31:31 +0000 http://tutsvalley.com/?p=223#comment-17500 Hey John, this should work great :) <pre name="code" class="html"> <script> $(document).ready(function(){ //get the height and width of the page var window_width = $(window).width(); var window_height = $(window).height(); //vertical and horizontal centering of modal window(s) /*we will use each function so if we have more then 1 modal window we center them all*/ $('.modal_window').each(function(){ //get the height and width of the modal var modal_height = $(this).height(); var modal_width = $(this).width(); //calculate top and left offset needed for centering var top = (window_height-modal_height)/2; var left = (window_width-modal_width)/2; //apply new top and left css values $(this).css({'top' : top , 'left' : left}); }); $('.activate_modal').click(function(){ //get the id of the modal window stored in the name of the activating element var modal_id = $(this).attr('name'); //use the function to show it show_modal(modal_id); }); $('.close_modal').click(function(){ //use the function to close it close_modal(); }); }); //THE FUNCTIONS function close_modal(){ //hide the mask $('#mask').fadeOut(500); //hide modal window(s) $('.modal_window').fadeOut(500); } function show_modal(modal_id){ //set display to block and opacity to 0 so we can use fadeTo $('#mask').css({ 'display' : 'block', opacity : 0}); //fade in the mask to opacity 0.8 $('#mask').fadeTo(500,0.8); //show the modal window $('#'+modal_id).fadeIn(500); } </script> <style> #mask{ position:absolute; /* important */ top:0px; /* start from top */ left:0px; /* start from left */ height:100%; /* cover the whole page */ width:100%; /* cover the whole page */ display:none; /* don't show it '*/ /* styling bellow */ background-color: black; } .modal_window{ position:absolute; /* important so we can position it on center later */ display:none; /* don't show it */ z-index:99; width:300px; height:300px; /* styling bellow */ color:#000; background-color:#fff; } /* style a specific modal window */ #modal_window{ padding:50px; border:1px solid gray; background: #246493; color:black; } </style> </pre> Hey John, this should work great :)
]]> By: john http://web.enavu.com/tutorials/how-to-make-a-completely-reusable-jquery-modal-window/comment-page-1/#comment-17488 john Wed, 01 Dec 2010 01:40:30 +0000 http://tutsvalley.com/?p=223#comment-17488 hi, i got this working partially in my site... unfortunately, after adding the first patch: code: var document_height = $(document).height(); $(‘#mask’).css({ ‘width’ : window_width, ‘height’ : document_height });" the popup and mask won't work... without it, it works fine except for the mask that doesn't fill all.. :( is there a new update on this module? thanks :D hi, i got this working partially in my site… unfortunately, after adding the first patch:

code:
var document_height = $(document).height();
$(‘#mask’).css({ ‘width’ : window_width, ‘height’ : document_height });”

the popup and mask won’t work…
without it, it works fine except for the mask that doesn’t fill all.. :(

is there a new update on this module?
thanks :D

]]> By: Carlos http://web.enavu.com/tutorials/how-to-make-a-completely-reusable-jquery-modal-window/comment-page-1/#comment-3180 Carlos Sat, 22 May 2010 15:52:26 +0000 http://tutsvalley.com/?p=223#comment-3180 Hi There, great solution and thanks for it, I´m try to understand it, because I´m new at this (Web Programming). I want to know how can I call a different page with a link?? (I don´t want to have the divs in the same page) Many Thanks!! Hi There, great solution and thanks for it, I´m try to understand it, because I´m new at this (Web Programming).

I want to know how can I call a different page with a link?? (I don´t want to have the divs in the same page)

Many Thanks!!

]]> By: mary http://web.enavu.com/tutorials/how-to-make-a-completely-reusable-jquery-modal-window/comment-page-1/#comment-1223 mary Fri, 05 Mar 2010 12:20:02 +0000 http://tutsvalley.com/?p=223#comment-1223 This is a great find. I was looking for something else but found this solution instead... will definitely implement it. This saves the trouble of having to name a lot of divs and form elements and attaching events to each a#openwindow1, a#openwindow2... Thanks! This is a great find. I was looking for something else but found this solution instead… will definitely implement it. This saves the trouble of having to name a lot of divs and form elements and attaching events to each a#openwindow1, a#openwindow2… Thanks!

]]> By: Boba http://web.enavu.com/tutorials/how-to-make-a-completely-reusable-jquery-modal-window/comment-page-1/#comment-1222 Boba Wed, 27 Jan 2010 15:23:35 +0000 http://tutsvalley.com/?p=223#comment-1222 @RBence - Don't mention it, glad to help. :) @RBence – Don’t mention it, glad to help. :)

]]>