Internet Explorer 11中的Jquery对话框问题

Jquery Dialog issue in Internet Explorer 11

本文关键字：对话框 问题 Jquery 中的 Explorer Internet      更新时间：2023-09-26

我有一个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中一个已知的bug。

这是bug报告:
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

相关文章：