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での既知のバグです。

これは、バグレポートです：あなたはjqueryのUI年代にあなたのselectタグを変更することでこの問題を解決することができ
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#Browser_compatibility を（注1テーブルの下）

：
https://connect.microsoft.com/IE/feedbackdetail/view/963961

ます。また、ここで確認することができます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は> = 1.11