jQuery tools modal overlay display problem in IE6-8
Posted
by Michael Stone
on Stack Overflow
See other posts from Stack Overflow
or by Michael Stone
Published on 2010-06-02T15:51:04Z
Indexed on
2010/06/02
15:54 UTC
Read the original article
Hit count: 495
I'm trying to enable the overlay to be modal. It works perfectly fine in FireFox, but the window object is behind the mask when it becomes modal. This prevents any interaction with it and the page is actually useless. I've tried debugging this for a while and can't figure it out.
Here is a link to the example on their site: http://flowplayer.org/tools/demos/overlay/modal-dialog.html
$.fn.cfwindow = function(btnEvent,modal,draggable){
//error checking
if(btnEvent == ""){
alert('Error in window :\n Please provide an id that instantiates the window. ');
}
if(!modal && !draggable){
$('#'+btnEvent+'[rel]').overlay();
$('#content_overlay').css('cursor','default');
}
if(!modal && draggable){
$('#'+btnEvent+'[rel]').overlay();
$('#content_overlay').css('cursor','move');
$('#custom').draggable();
}
if(modal){
$('#'+btnEvent+'[rel]').overlay({
// some mask tweaks suitable for modal dialogs
mask: {
color: '#646464',
loadSpeed: 200,
opacity: 0.6
},
closeOnClick: false
});
$('#content_overlay').css('cursor','default');
//$('#custom').addClass('modal');
}
};
That's what I'm referencing when I call through:
<script type="text/javascript">
$(document).ready(function(){
$(document).pngFix();
var modal = <cfoutput>#attributes.modal#;
var drag = #attributes.draggable#;
var btn = '#attributes.selector#';
var src = '#attributes.source#';
var wid = '#attributes.width#';
$('##custom').width(parseInt(wid));
$('div##load_content').load(src);
$('##custom').cfwindow(btn,modal,drag,wid);
});
</script>
CSS for the modal:
<style type="text/css">
.modal {
display:none;
text-align:left;
background-color:#FFFFFF;
-moz-border-radius:6px;
-webkit-border-radius:6px;
}
</style>
Exclude the and the additional pound signs, IE. "##".
Screen shot of the problem: http://twitpic.com/1tak06
Note: IE6 and IE8 have the same problem.
Any help would be appreciated.
© Stack Overflow or respective owner