javascript - Internet Explorer 11 中的 Jquery 对话框问题

Question

我有一个 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/

Answer 1

这是 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>

Note that selectmenu requires jqueryui >= 1.11