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工具模态叠加显示问题

回答

相关问题