JQuery инструменты проблема отображения модального наложения в IE6-8

Question

JQuery инструменты проблема отображения модального наложения в IE6-8

Я пытаюсь сделать наложение модальным. Он отлично работает в 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>

Исключить и дополнительные знаки фунта, т.е. "##".

Снимок экрана с проблемой: 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" 
        />

3

jquery jquery-plugins modal-dialog jquery-tools

Источник

user142937 02 июн '10 в 15:51

5 ответов

Другие вопросы по тегам jquery jquery-plugins modal-dialog jquery-tools

user487607 02 янв '11 в 21:36 2011-01-02 21:36 · Answer 1 · 2011-01-02 21:36

Я знаю, что это довольно старый вопрос, но я только что преодолел некоторые проблемы в IE6 и IE7 с наложением jQuery Tools.

Мой div с классом ".modal" был вложен в контейнерный div, который имел относительную позицию, поэтому настройка z-index, которую я пытался навязать модальному классу, не имела никакого эффекта.

Я переместил модальный div за пределы любых контейнеров, в моем случае, в самое нижнее место страницы непосредственно перед закрывающим тегом body, и я сделал очень приятное наложение в IE6 и IE7.

Мне действительно пришлось скопировать некоторые стили из моего контейнерного класса в мой модальный класс, но ИМХО очень немного раздражало, чтобы получить желаемый результат для моего клиента, у которого все еще есть значительное количество посетителей сайта, использующего IE6, и, конечно, более быстрое решение, чем реализация совершенно другой плагин jQuery.

user1544111 22 июл '12 в 15:21 2012-07-22 15:21 · Answer 2 · 2012-07-22 15:21

Добавьте это на свою страницу с наложением:

<!DOCTYPE html>

1

Источник

user1544111 22 июл '12 в 15:21

user1839554 25 янв '13 в 17:57 2013-01-25 17:57 · Answer 3 · 2013-01-25 17:57

У меня та же проблема в 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);
            }
        });}

user629885 28 май '14 в 06:06 2014-05-28 06:06 · Answer 4 · 2014-05-28 06:06

Подсказка не сработала для меня, и для решения этой проблемы мне просто пришлось переопределить атрибут позиции ui-widget-overlay в Absolute для работы с IE 8, это не относится к функции открытия моего диалога.

$dialog.dialog( { ..... ,open: function() {$('.ui-widget-overlay').css('position', 'absolute');} ,close: function() {$('.ui-widget-overlay').css('position', 'fixed');} ....});Надеюсь, это поможет.

user345479 02 июн '10 в 16:05 2010-06-02 16:05 · Answer 5 · 2010-06-02 16:05

Вы пытались добавить z-index:999; к вашему. модал? Я полагаю, у вашего div есть имя класса modal? Могу ли я увидеть, как у вас настроен HTML?

0

Источник

user345479 02 июн '10 в 16:05