jQuery对话框未捕获控件-IE 9.0_Jquery_Html_Css_Jquery Ui_Internet Explorer

jQuery对话框未捕获控件-IE 9.0

jquery html css jquery-ui internet-explorer

jQuery对话框未捕获控件-IE 9.0,jquery,html,css,jquery-ui,internet-explorer,Jquery,Html,Css,Jquery Ui,Internet Explorer,我的页面上有一个CSS吸盘鱼侧菜单。当用户单击页面中的一个项目时，我弹出一个jQueryUI对话框，在页面的一个div中，我通过jQueryAjax加载一个HTML页面在Chrome中，每当我单击菜单上的项目时，焦点就会从菜单转移到jQuery UI对话框上但在IE和Opera中，即使在我点击了菜单项之后，焦点仍然停留在菜单上。jQuery UI对话框无法将焦点从菜单上移开，因此它保持打开状态，并妨碍用户查看请看附件中的图片正如你所看到的，我甚至添加了一个文本框并抓住了焦点，但即使如此

我的页面上有一个CSS吸盘鱼侧菜单。当用户单击页面中的一个项目时，我弹出一个jQueryUI对话框，在页面的一个div中，我通过jQueryAjax加载一个HTML页面

在Chrome中，每当我单击菜单上的项目时，焦点就会从菜单转移到jQuery UI对话框上

但在IE和Opera中，即使在我点击了菜单项之后，焦点仍然停留在菜单上。jQuery UI对话框无法将焦点从菜单上移开，因此它保持打开状态，并妨碍用户查看

请看附件中的图片

正如你所看到的，我甚至添加了一个文本框并抓住了焦点，但即使如此也没有改变

应要求

示例：当您在IE 9中打开网站，然后单击sayTechnologies>MySQL或Technologies>MSSQL时，菜单不会关闭，但应该会关闭，因为我正在打开一个模式对话框，同时将页面加载到div中。但是如果您在chrome中打开页面，并尝试同样的操作，菜单关闭，它应该关闭。附上相关代码片段：-

/**********************************************
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");
}

更新#3：我尝试了另一种方法，在菜单项的单击事件中，我隐藏了所有次要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
中的代码，以删除我先前添加的display属性，但它仍然不起作用

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>

我们的服务软件开发技术 .NET/C# 我们的主要专业领域，拥有超过5年的经验。 MS-SQL 我们已经使用SQL 6年多了。 MySQL 开放源代码数据库，实现更快、无麻烦的部署。银光 Lorem ipsum dolor sit amet，是一位杰出的献身者。奎斯克坐下。 MVC Lorem ipsum dolor sit amet，是一位杰出的献身者。奎斯克坐下。蔚蓝色的 Lorem ipsum dolor sit amet，是一位杰出的献身者。奎斯克坐下。应用微软客户关系管理系统我们的主要专业领域，拥有超过5年的经验。速记簿 Lorem ipsum dolor sit amet，是一位杰出的献身者。奎斯克坐下。大平原 Lorem ipsum dolor sit amet，是一位杰出的献身者。奎斯克坐下。 Sharepoint Lorem ipsum dolor sit amet，是一位杰出的献身者。奎斯克坐下。塞罗 Lorem ipsum dolor sit amet，是一位杰出的献身者。奎斯克坐下。新书 Lorem ipsum dolor sit amet，是一位杰出的献身者。奎斯克坐下。销售人员 Lorem ipsum dolor sit amet，是一位杰出的献身者。奎斯克坐下。导航 Lorem ipsum dolor sit amet，是一位杰出的献身者。奎斯克坐下。独立软件测试技术文件案例研究媒体-星体 Lorem ipsum dolor sit amet，是一位杰出的献身者。奎斯克坐下。 function checkAndDisplay(dialogToHide, divToShow) { $("#" + divToShow).css('display', 'block'); setTimeout(function(){ $("#" + dialogToHide).dialog("close"); },500); } $(".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; }); $(".secondCatHeader,.mainCatHeaderWithChild").hover(function () { $(this).children(".secondaryMenuContainer").css('display', ''); })