jQuery tools modal overlay display problem in IE6-8
- by Michael Stone
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.
