Диалоговое окно jQuery не захватывает элемент управления - IE 9.0

У меня есть боковое меню рыбы-присоски CSS на моей странице. Когда пользователь нажимает на элемент на странице, я вывожу диалоговое окно jQuery UI и внутри div на странице я загружаю HTML-страницу через jQuery AJAX.

В Chrome фокус смещается в сторону от меню и в диалоговое окно jQuery UI, когда я нажимаю элемент в меню.

Но в IE и Opera фокус остается в меню даже после того, как я нажал на элемент. Диалоговое окно jQuery UI не может сдвинуть фокус от меню, поэтому оно остается открытым и препятствует представлению пользователя.

Пожалуйста, взгляните на прикрепленное изображение.

Как вы можете видеть, я даже добавил текстовое поле и захватил там фокус, но даже в этом нет никаких изменений.

В соответствии с запросом вот ссылка на сайт.

Пример. Когда вы открываете сайт в IE 9 и нажимаете Технологии > MySQL или Технологии > MSSQL, меню не закрывается, но это должно быть связано с тем, что я открываю модальный диалог при загрузке страницы в div. Но если вы откроете страницу в хроме и попробуете то же самое, меню закрывается, как и должно быть. Прикрепление соответствующих фрагментов кода: -

/**********************************************
Function to load an html page inside a div
**********************************************/
function loadPageInDiv(containerDiv, pageToLoad, divToLoadIn, loadingDialog, callBackFunction) {
    var parentDiv = $("#" + containerDiv);
    var loadDiv = $("#" + divToLoadIn);
    var dialogBox = $("#" + loadingDialog);
    // Show dialog box first, then fadeOut, then load, then fadeIn,the close.
    $(dialogBox).data('loadDiv', loadDiv).dialog("open");
    $(loadDiv).load(pageToLoad, function (response, status, xhr) {
        if (response == "error") {
            $(dialogBox).dialog('close');
        }
        else {
            if (callBackFunction != null) {
                callBackFunction();
            }            
            checkAndDisplay(loadingDialog, divToLoadIn);
        }
    });
}

Функция для инициализации диалогового окна jquery-ui.

/**************************************
Function to initialize the dialog box
*****************************************/
function initializePleaseWaitDialog() {
    $("#osmPleaseWait").dialog({
        autoOpen: false,
        modal: true,
        dialogClass: 'noTitleDialog',
        draggable: false,
        resizable: false
    });
}

Функция для переключения отображения DIV

/***************************************
Function to toggle div display
****************************************/
function checkAndDisplay(dialogToHide, divToShow) {
    $("#" + divToShow).css('display', 'block');
    $("#" + dialogToHide).dialog("close");
}

UPDATE # 3: Я попробовал другой способ. В событие click элементов меню я скрываю все вторичные div.

        $(".osmMenuObject,.mainCatHeaderWithoutChild").click(function () {
            // Currently Selected
            $(".osmMenuObject,.mainCatHeaderWithoutChild").removeClass("osmServiceListSelected");
            $(this).addClass("osmServiceListSelected");
            // Hiding the div**
            $(".secondaryMenuContainer").css('display', 'none');
            var pageToLoad = $(this).children("input[type='hidden']").val();
            loadPageInDiv("serviceLoadDivContainer", pageToLoad, "serviceLoadDiv", "osmPleaseWait");
            return false;
        });

Затем я обновил код в checkAndDisplay, чтобы удалить атрибут отображения, который я добавил ранее, но он все еще не работает.

function checkAndDisplay(dialogToHide, divToShow) {
    $("#" + dialogToHide).dialog("close");
    $("#" + divToShow).css('display', 'block');
    $(".secondaryMenuContainer").css('display', '');
}

ЗДЕСЬ разметка для страницы.

<div class="osmListContainerSpecial">
            <div class="osmListHeader" id="osmListHeaderServices">
                Our Services
            </div>
            <div class="mainCatHeader">
                Software Development
            </div>
            <%-- Technologies --%>
            <div class="secondCatHeader">
                Technologies
                <div class="secondaryMenuContainer" id="softwareDevTech">
                    <div class="secondaryMenu" style="COLOR: #3e3e3e" id="techMenu">
                        <div class="osmMenuObject">
                            .NET/ C#
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techCSharp.html" />
                            <div class="shortMenuDesc">
                                Our primary area of expertise, with over 5 years of experience.</div>
                        </div>
                        <div class="osmMenuObject">
                            MS-SQL
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techMsSQL.html" />
                            <div class="shortMenuDesc">
                                We have been working with SQL for over 6 years now.</div>
                        </div>
                        <div class="osmMenuObject">
                            MySQL
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techMySQL.html" />
                            <div class="shortMenuDesc">
                                Open Source Database for faster, hassle-free deployment.</div>
                        </div>
                        <div class="osmMenuObject">
                            Silverlight
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techSilverlight.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div class="osmMenuObject">
                            MVC
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techMVC.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div class="osmMenuObject">
                            Azure
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Applications/techAzure.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                    </div>
                </div>
            </div>
            <%-- Applications --%>
            <div class="secondCatHeader">
                Applications
                <div class="secondaryMenuContainer" id="softwareDevApp">
                    <div class="secondaryMenu">
                        <div id="appMsCRM" class="osmMenuObject">
                            Microsoft CRM
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appMsCRM.html" />
                            <div class="shortMenuDesc">
                                Our primary area of expertise, with over 5 years of experience.</div>
                        </div>
                        <div id="appQb" class="osmMenuObject">
                            QuickBooks
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appQb.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div id="appGP" class="osmMenuObject">
                            Great Plains
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appGp.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div id="appSP" class="osmMenuObject">
                            Sharepoint
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appSp.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div id="appXero" class="osmMenuObject">
                            Xero
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appXero.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div id="appFB" class="osmMenuObject">
                            Freshbooks
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appFb.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div id="appSF" class="osmMenuObject">
                            SalesForce
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appSF.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div id="appNav" class="osmMenuObject">
                            Navision
                            <input type="hidden" value="ServicesHTML/SoftwareDevelopment/Technologies/appNavision.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                    </div>
                </div>
            </div>
            <%-- Independent Software Testing --%>
            <div class="mainCatHeaderWithoutChild">
                Independent Software Testing
                <input type="hidden" value="ServicesHTML/Testing.html" />
            </div>
            <%-- Technnical Documentation --%>
            <div class="mainCatHeaderWithoutChild">
                Technnical Documentation
                <input type="hidden" value="ServicesHTML/Documentation.html" />
            </div>
            <%-- Case Studies --%>
            <div class="mainCatHeaderWithChild">
                Case Studies
                <div class="secondaryMenuContainer">
                    <div class="secondaryMenu" style="COLOR: #3e3e3e">
                        <div class="osmMenuObject">
                            Media - Astral
                            <input type="hidden" value="ServicesHTML/CaseStudies/csAstral.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div class="osmMenuObject">
                            Waste Disposal - RGMRM
                            <input type="hidden" value="ServicesHTML/CaseStudies/csRGMRM.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div class="osmMenuObject">
                            Insurance - IAAH
                            <input type="hidden" value="ServicesHTML/CaseStudies/csIAAH.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div class="osmMenuObject">
                            Housing Providers - TalonPro
                            <input type="hidden" value="ServicesHTML/CaseStudies/csTalonPro.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div class="osmMenuObject">
                            Education and Training - Met Film
                            <input type="hidden" value="ServicesHTML/CaseStudies/csMetFilm.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div class="osmMenuObject">
                            Industry - Bates
                            <input type="hidden" value="ServicesHTML/CaseStudies/csBates.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                        <div class="osmMenuObject">
                            Industry - Atdec
                            <input type="hidden" value="ServicesHTML/CaseStudies/csAtdec.html" />
                            <div class="shortMenuDesc">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit.</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Пожалуйста, дайте мне знать, нужен ли вам какой-либо другой код или какие-либо другие запросы.

Ответы

Ответ 1

Хорошо, так как не было надлежащего обходного пути. Вот что я сделал, чтобы обойти проблему. Некоторые могут подумать, что это слегка взломало, но я не нашел другого решения.

Если вы проверите мое 3-е обновление, я скрываю дополнительное меню,

        $(".osmMenuObject,.mainCatHeaderWithoutChild").click(function () {
            // Currently Selected
            $(".osmMenuObject,.mainCatHeaderWithoutChild").removeClass("osmServiceListSelected");
            $(this).addClass("osmServiceListSelected");
            // Hiding the div || THIS WAS NEW
            $(".secondaryMenuContainer").css('display', 'none');
            var pageToLoad = $(this).children("input[type='hidden']").val();
            loadPageInDiv("serviceLoadDivContainer", pageToLoad, "serviceLoadDiv", "osmPleaseWait");
            return false;
        });

Теперь в самом событии document.ready() я добавляю другое событие.

        $(".secondCatHeader,.mainCatHeaderWithChild").hover(function () {      
            $(this).children(".secondaryMenuContainer").css('display', '');
        })

Теперь, когда это произойдет, всякий раз, когда мы наводим курсор на один из элементов меню и у него есть дети с классом .secondaryMenuContainer, он очистит встроенный дисплей этого класса. Таким образом, display:none, который я установил ранее, будет очищен. Я тестировал это с помощью IE 9.0 и Opera, и, похоже, он работает правильно.

Спасибо всем.

Ответ 2

Кажется, это гоночное состояние. Я не уверен в части "почему", но это, похоже, преодолевает проблему:

Замените функцию checkAndDisplay следующей версией:

function checkAndDisplay(dialogToHide, divToShow) {
    $("#" + divToShow).css('display', 'block');
    setTimeout(function(){
        $("#" + dialogToHide).dialog("close");
    },500);
}

Изменить. Похоже, что в Internet Explorer отсутствует ошибка, которая не обновляет состояние "зависания", за исключением перемещения мыши. Вот воспроизводимый образец. Попробуйте щелкнуть зеленую область в разных браузерах и НЕ перемещать мышь. http://jsfiddle.net/5LR8Z/

Я не нашел решения для этой конкретной ошибки. В качестве обходного пути я бы попытался вручную закрыть меню (установить переменную в обработчике кликов, чтобы узнать, какое меню закрыть в функции checkAndDisplay).

Ответ 3

Из того, что я могу сказать, у вас есть конфликт CSS между строкой 1101 и линией 1109. Вы установили .secondaryMenuContainer в DISPLAY: none;, но затем установите его на DISPLAY: block; после .secondCatHeader:hover;

Диалоговое окно jQuery UI не отменяет условие hover, поэтому ваш .secondaryMenuContainer никогда не возвращается к DISPLAY: none;

$(".secondaryMenuContainer").css('display', ''); не работает, потому что он устанавливает недопустимый встроенный стиль, поэтому браузер возвращается к отображению действительного внешнего стиля, в данном случае DISPLAY: block;, так как пользователь hover не прерывается. Если вы хотите, чтобы .secondaryMenuContainer просто каскадировался в состояние DISPLAY: none;, вам придется сломать зависание пользователя.

Один из методов заключается в создании пустого div при загрузке диалогового окна; один с индексом z выше вашего .secondaryMenuContainer, который занимает все окно. Затем вы удалите этот div, когда диалоговое окно исчезнет. Это должно сломать зависание пользователя и позволить стилю div вернуться к DISPLAY: none;

EDIT:. Так как это jQuery UI, то модальный блок должен загружать .ui-widget-overlay, который делает именно то, что я описал. Функция вызывается в стеке при e.widget._createOverlay @jquery-ui-1.10.1.custom.min.js:6, но не останавливает взаимодействие с страницей так, как предполагалось.