IE6-8中的jQuery工具模態疊加顯示問題

我試圖啓用疊加模式。它在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" 
     />

來源

2010-06-02 Michael Stone

你有沒有嘗試添加的z-index：999;你的.modal？我假設你的div有模態的類名？我可以看到你有你的HTML設置？

來源

2010-06-02 16:05:39 edl

是的。我試着添加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

我知道這是一個相當古老的問題，但我剛剛解決了具有jQuery Tools覆蓋的IE6 & IE7中的確切問題。

我的div與「.modal」類嵌套在具有相對位置的容器div中，所以我試圖對模態類強制的z-index設置根本沒有任何效果。

我把模態div移到了任何容器的外面，在我的情況下，移到頁面的最下面，就在關閉body標籤之前，並且在IEIE7中預置了一個非常漂亮的覆蓋層。

我確實必須從我的容器類複製一些樣式到我的模態類，但一個非常小的煩惱恕我直言，以獲得所需的結果，我的客戶仍然有大量的網站訪問者使用IE6，當然更快解決方案比實現完全不同的jQuery插件。

來源

2011-01-02 21:36:39

位置：在IE中絕對會讓流水遊戲疊加變得古怪！ – jzm 2011-09-13 01:23:24

添加到您的網頁具有覆蓋：

<!DOCTYPE html>

來源

2012-07-22 15:21:49 Jorge

我在IE8同樣的問題，並使用保持兼容IE8絲毫不IE7，<!DOCTYPE html>對我不起作用。我創建一個自定義模板：

#mask-modal{ 
position:absolute; 
z-index:9000; 
background-color:#fff; 
display:none; 
} 

<div id="#mask-modal"></div> 

    if (jQuery.browser.msie == true && jQuery.browser.version == 8) { 
     /* Carga el overlay confirmar */ 
     jQuery("#modalconfirmar .modalInput").overlay({ 
      // Calcula el centro de la ventana 
      top : ((jQuery(parent.document).height()/2) - (jQuery("#modalconfirmar").innerHeight() + 180)), 
      closeOnClick: false, 
      onBeforeLoad: function(){ 
       // @TODO cargar mask custom 

       //Get the screen height and width 
       var maskHeight = $(document).height(); 
       var maskWidth = $(window).width(); 

       //Set height and width to mask to fill up the whole screen 
       $('#mask-modal').css({ 
        'width':maskWidth, 
        'height':maskHeight 
       }); 

       $('#mask-modal').fadeTo(500,0.6); 
       // Load page into iframe 
       jQuery(document.body).css('overflow', 'hidden'); 
      }, 
      onLoad : function(){ 
       jQuery("#modalconfirmar").css('z-index', jQuery("#mask-modal").css('z-index') + 10); 
      }, 
      onClose : function(){ 
       jQuery("#modalconfirmar .si").off(); 
       $('#mask-modal').fadeOut(400); 
      } 
     });}

來源

2013-01-25 17:57:00 nesX

尖端並沒有爲我工作，並解決問題，我不得不與UI控件疊加位置屬性重新定義絕對與IE 8中運行，這不在我的對話框的開放功能上。

$dialog.dialog( { ..... ,open: function() {$('.ui-widget-overlay').css('position', 'absolute');} ,close: function() {$('.ui-widget-overlay').css('position', 'fixed');} ....}); 希望它能提供幫助。

來源

2014-05-28 06:06:36 sstassin

IE6-8中的jQuery工具模態疊加顯示問題

回答

相關問題