jQuery工具模态叠加在IE6-8中显示问题

Question

我正在尝试使叠加层成为模态。它在 FireFox 中工作得很好，但是当它变成模态时，窗口对象位于 mask 后面。这会阻止与其进行任何交互，并且该页面实际上是无用的。我已经尝试调试这个有一段时间了，但无法弄清楚。

以下是其网站上示例的链接: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" 
        />

Answer 1

我知道这是一个相当老的问题，但我刚刚使用 jQuery 工具覆盖克服了 IE6 和 IE7 中的一些问题。

我的带有“.modal”类的 div 嵌套在具有相对位置的容器 div 内，因此我试图在模态类上强制执行的 z-index 设置根本没有任何效果。

我将模态 div 移到了任何容器之外，在我的例子中，移到了页面的最底部，就在结束 body 标记之前，嘿，在 IE6 和 IE7 中，这是一个非常漂亮的叠加层。

我确实必须将一些样式从我的容器类复制到我的模态类中，但恕我直言，为了让我的客户获得所需的结果，我的客户仍然有大量使用 IE6 的网站访问者，这确实是一个很小的烦恼，当然也是一个更快的解决方案而不是实现一个完全不同的 jQuery 插件。