我試圖啓用疊加模式。它在FireFox中工作得很好,但窗口對象在模態時位於遮罩後面。這阻止了與它的任何交互,而頁面實際上是無用的。我已經嘗試過調試一段時間,並且無法弄清楚。IE6-8中的jQuery工具模態疊加顯示問題
這是在其網站上的例子的鏈接: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');
}
};
這就是我引用的時候我叫過:
<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的模式:
<style type="text/css">
.modal {
display:none;
text-align:left;
background-color:#FFFFFF;
-moz-border-radius:6px;
-webkit-border-radius:6px;
}
</style>
排除和額外的英鎊標誌,IE。 「##」。
問題的屏幕截圖:http://twitpic.com/1tak06
注:IE6和IE8有同樣的問題。
任何幫助,將不勝感激。
Update: HTML of the overlay/modal window:
<div class="simple_overlay" id="custom">
<div id="content_overlay">
<div id="handler">
<div id="headerss">
<h5 class="titless"><span style="color:##000000;">#attributes.title#</span></h5>
<div class="yellowRule"></div>
</div>
<div id="load_content">
</div>
</div>
</div>
</div>
更新:添加前端
<!-- overlay triggers. overlay is referenced in the 'rel' attribute -->
<p>
<button rel="#custom" type="button" id="openWindow">Email</button>
</p>
<cf_eo_window2
title="This modal isn't working in IE!"
selector="openWindow"
draggable="false"
width="350"
modal="true"
source="import-test.cfm"
/>
是的。我試着添加z-index。我現在將添加HTML。 – 2010-06-02 16:41:52
哇,這是很多divs。你的問題可能在於你的覆蓋div內嵌入了你的模態div。模態腳本的美妙之處在於,它通常會忽略結構,只要它知道從哪裏獲取內容,IE就是表單和覆蓋。試着拉出你的模態部分,看看你是否得到更好的結果。 – edl 2010-06-02 17:19:26
感謝您的輸入。我試過了,沒有任何影響。另外,每個div集在窗口的自定義設計中扮演着特定的角色。我嘗試將其剝離到基礎,但仍然沒有。 – 2010-06-02 17:35:39