3

我正在尝试使叠加层成为模态。它在 FireFox 中工作得非常好,但是当它变成模态时,窗口对象在掩码后面。这可以防止与它的任何交互,并且该页面实际上是无用的。我已经尝试调试了一段时间,但无法弄清楚。

这是他们网站上示例的链接: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" 
        />
4

5 回答 5

3

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

我的“.modal”类的 div 嵌套在一个具有相对位置的容器 div 中,所以我试图在 modal 类上强制设置的 z-index 设置根本没有效果。

我将模态 div 移到任何容器之外,在我的例子中,移动到页面的最底部,就在结束 body 标记之前,嘿,在 IE6 和 IE7 中出现了一个非常好的覆盖。

我确实必须将一些样式从我的容器类复制到我的模态类中,但是对于我仍然有大量使用 IE6 的网站访问者的客户来说,这是一个非常小的烦恼,恕我直言,这肯定是一个比实施更快的解决方案完全不同的jQuery插件。

于 2011-01-02T21:36:39.073 回答
1

将此添加到具有叠加层的页面:

<!DOCTYPE html>
于 2012-07-22T15:21:49.013 回答
0

您是否尝试过添加 z-index:999; 到你的.modal?我假设你的 div 有一个模态的类名?我可以看看你是如何设置你的 html 的吗?

于 2010-06-02T16:05:39.167 回答
0

我在 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-25T17:57:00.983 回答
0

该提示对我不起作用,要解决问题,我只需将 ui-widget-overlay 位置属性重新定义为 Absolute 即可与 IE 8 一起使用,这在我的对话框的打开功能上是不可用的。

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

于 2014-05-28T06:06:36.030 回答