jQuery对话框无法捕获控件 - IE 9.0
Abi*_*tro 13 html css jquery internet-explorer jquery-ui
我的页面上有一个CSS sucker fish side-menu.当用户点击页面中的某个项目时,我弹出一个jQuery UI对话框,在页面上的div内我通过jQuery AJAX加载一个HTML页面.
在Chrome中,每当我点击菜单上的某个项目时,焦点就会从菜单移到jQuery UI对话框中.
但是在IE和Opera中,即使我点击了该项目,焦点仍然在菜单上.jQuery UI对话框无法将焦点从菜单移开,因此它保持打开状态并阻碍用户的视图.
请查看附件图片.
正如你所看到的,我甚至添加了一个文本框并抓住了那里的焦点,但即便如此也没有变化.
根据要求,这是该网站的链接.
示例:当您在IE 9中打开网站,然后单击"说明技术">"MySQL" 或" 技术">"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,删除我之前添加的显示属性,但它仍然不起作用.
function checkAndDisplay(dialogToHide, divToShow) {
$("#" + dialogToHide).dialog("close");
$("#" + divToShow).css('display', 'block');
$(".secondaryMenuContainer").css('display', '');
}
HERE是页面的标记.
<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>
如果您需要任何其他代码或有任何其他疑问,请告诉我.
好吧，因为还没有适当的解决方法。这是我为规避问题所做的事情。有些人可能认为这有点 hack-y，但我找不到任何其他解决方案。
如果您检查我的第三次更新，我会隐藏二级菜单，
$(".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', '');
})
现在，每当我们将鼠标悬停在其中一个菜单项上，并且它有一个带有 class 的子项时.secondaryMenuContainer，它将清除该类的内联显示。这样display:none我之前设置的就会被清除。我已经用 IE 9.0 和 Opera 对此进行了测试，它似乎工作正常。
感谢大家。