Modal on modal with jQuery Tools

So this one took me a bit more work, it works with the Apple Overlay as shown in jQuery Tools here: http://jquerytools.org/demos/overlay/apple.html Just set up your primary overlay (not the trigger) with the class “apple_overlay”.

Below is the code for the secondary overlay/modal, call the first with the following parameters included {closeOnClick: false, closeOnEsc: false}, should work whatever the previous modal/overlay settings, or even if called straight from the page.

var oldMaskZ = null;
var $oldMask = $(null);
$(document).ready(function(){
	$("a[rel].modal").overlay({
		effect: 'apple',
		oneInstance:false,
		closeOnClick: false,
		closeOnEsc: false,
		zIndex: 10100,
		onLoad: function(){
			if($.mask.isLoaded()) {
				//this is a second overlay, get old settings
				oldMaskZ = $.mask.getConf().zIndex;
				$oldMask = $.mask.getExposed();
				$.mask.getConf().closeSpeed = 0;
				$.mask.close();
			this.getOverlay().expose({
					color: 'darkgrey',
					zIndex: 10090,
					closeOnClick: false,
					closeOnEsc: false,
					loadSpeed: 0,
					closeSpeed: 0
				});
			}else{
				this.getOverlay().expose({
					color: 'darkgrey',
					zIndex: 10090,
					closeOnClick: false,
					closeOnEsc: false
				});
			}
			//Other onLoad functions
		},
		onClose: function(){
			$.mask.close();
			//re-expose previous overlay if there was one
			if($oldMask != null){
				$oldMask.expose({
					color: 'darkgrey',
					zIndex: oldMaskZ,
					closeOnClick: false,
					closeOnEsc: false,
					loadSpeed: 0
				});
				//Assumes the other overlay has apple_overlay class
				$(".apple_overlay").css("zIndex", oldMaskZ + 2);
			}
		}
	});
});

To see the whole thing in action with a modified version of the jQuery Tools Example for the apple overlay go to the JSFiddle example.

EDIT: An important point that I actually did figure out but forgot to update about that Tom has just reminded me (thank!!) is that the first overlay must have the properties {closeOnClick: false, closeOnEsc: false} otherwise the funkyness he mentioned occurs. I have updated the files as well.

About Simeon Cheeseman

I enjoy a wide variety of computer and board games, have a BSc in Computer Science and have played percussion for 18 years.

Posted on January 26, 2011, in HTML, jQuery, jQuery Tools. Bookmark the permalink. 8 Comments.

  1. Hi!
    awesome implementation but even thought close on click is false you click off and it still closes it and then the masks get a bit funky..
    cheers,
    Tom

  2. Not bad, but it doesn’t work if the second modal overlay is (a lot) smaller than the first.

    I need to display a small “more information” overlay over an already displayed modal overlay.

    …still trying to get it to work.

    Thanks for a lead, though. I will get this eventually…

  3. Hi,
    Nice article. Wondering if we can move back and forth within two overlays?
    I mean only show one overlay at a time not having impact on the background mask!

    Thanks
    Pras

    • Hi Pras.

      You could probably fake this by just having both dialog info in the same dialog, just different divs and alternate them by hiding and showing them respectively (this only really works if you have the two overlays the same size).
      If you actually wanted the other overlay to be visible under the mask behind somewhere then you can do this, you just have to switch the z-index of both overlay’s, thus bringing one in front of the mask and the other behind.
      Heres a JSFiddle example: http://jsfiddle.net/Xanetia/eb9Xv/ (It’s just a rough example, you would still have to play with the css a fair bit).

      Thanks, Simeon.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: