我有一个单击链接时打开的jquery对话框。在对话框中,我有一个下拉菜单,该菜单超过了对话框的高度。高度不能改变,它是固定的。当对话框打开时,当光标在对话框之外时,我将光标类型更改为“不允许”。问题是下拉菜单出现在对话框外部,并且当鼠标悬停在对话框上方的选项上时,光标保持禁用状态。这仅发生在Internet Explorer中。它在Firefox和Google Chrome中正常运行。我将在下面发布我的代码和一个jsfiddle。
HTML:
<a href="#" id="open_terms" title="Terms">Jquery Dialog</a>
<div id="terms" style="padding:12px">
<p>This is some sample text for the DIALOG</p>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
</select>
</div>
jQuery的:
$(function () {
$('#open_terms').click(function(){
ShowDialog();
});
function ShowDialog() {
//$('#terms').css('visibility', 'block');
$('#terms').dialog({
modal: true,
resizable: false,
width: '500px',
title: 'DIALOG BOX'
});
$('#terms').dialog("widget").next(".ui-widget-overlay").css("cursor", "not-allowed");
};
});
CSS:
#terms {
display:none;
}
http://jsfiddle.net/wgJAE/16/
最佳答案
这是IE11中的已知错误。
这是错误报告:
https://connect.microsoft.com/IE/feedbackdetail/view/963961
您也可以在这里检查:
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#Browser_compatibility
(表下方的注1)
您可以通过将select
标签更改为jquery ui的selectmenu
来解决此问题:
$(function () {
$('#open_terms').click(function(){
ShowDialog();
});
function ShowDialog() {
$('#terms').dialog({
modal: true,
resizable: false,
width: '500px',
title: 'DIALOG BOX'
});
$('#terms').find('select').selectmenu()
$('#terms').dialog("widget").next(".ui-widget-overlay").css("cursor", "not-allowed");
};
});
#terms {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<a href="#" id="open_terms" title="Terms">Jquery Dialog</a>
<div id="terms" style="padding:12px">
<p>This is some sample text for the DIALOG</p>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
</select>
</div>
请注意,
selectmenu
需要jqueryui> = 1.11