IE7 issue with Z-index of position absoluted containers... and it going UNDER embedded PDF's!

Hey everyone! Got a fun situation for you guys in IE7!

A "working" example is here for your viewing pleasure: (http://cascadewealth.securetesting.info/resources/renderArticle.cfm?fileName=0906-maintaining-your-credit.pdf)

The problem: We are using simple modal to deliver "email to a friend" functionality. It works great everywhere EXCEPT for IE7. For those familiar IE7 has that pesky problem where Select, Embed, and Object have indefinite Z-index, and therefore getting things like drop down menu's or modals over them is hellacious.

So, how many of you have encountered this, and what was your solution? I've read the whole "params" option and I've tried it to no avail. I've tried the parent container Z-index to no avail. Any other tricks out there?
beemerrider130hpAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
remorinaConnect With a Mentor Commented:
Hi beemerrider130hp.
You can use the onShow & onClose events of the modal to set the visibility of the embed container In your jquery.simplemodal-1.3.4.min.js modify the function as below and give the id="embedded" to the div containing your embed

I've also attached an extracted working example to show you how it works

P.S do not overwrite any of your files with the files I've attached

Cheers

// in your HTML //
<div id="embedded" style="position:relative; z-index:0;">
<object width="952" height="650" style="z-index:0; position:relative;">
	<param NAME="wmode" VALUE="transparent">
	<embed src="/articles/0906-maintaining-your-credit.pdf" width="952" height="650"/>
</object>
</div>


// In Your jquery.simplemodal-1.3.4.min.js //
jQuery(function ($) {
	$('#mailFriendLink').click(function (e) {
		e.preventDefault();
		$('#mailFriendModal').modal({
		onShow: function(dialog) {document.getElementById('embedded').style.visibility="hidden";},
		onClose: function(dialog) {document.getElementById('embedded').style.visibility="visible";$.modal.close();}
		});
	});
});

Open in new window

simple-modal-events.zip
0
 
andrewbleakleyCommented:
use javascript to hide the elements (select, object etc etc) just before you pop the modal window up and unhide them just before it closes
0
 
beemerrider130hpAuthor Commented:
Great solution! I should have thought of this, but I was so stuck in the concept of trying to enable the functionality instead of simply flat out skip IE7's lack of proper functionality! Great job!
0
All Courses

From novice to tech pro — start learning today.