无法在模式对话框中滚动选择选项(Chrome)

时间:2014-01-23 00:54:09

标签: jquery-ui google-chrome modal-dialog

我在一个包含大量select选项元素的对话框中有一个表单。这在IE和FF中运行良好,但在Chrome中,我无法滚动选项。我可以通过选择一个选项来选择它们,然后在选项折叠后,使用箭头键浏览列表。我使用的是Chrome版本32.0.1700.76和jQuery 1.9.1。我确实尝试使用1.10.2并且它没有解决问题。我的小提琴示例使用1.9.1,因为选择1.10.2不允许包含jQuery UI 1.9.2。您甚至可以在小提琴中看到框架选择输入不可滚动。感谢。

http://jsfiddle.net/4mH8a/19/

HTML:

<form>
    <input type="button" value="Open Modal" onclick="$('#divSelect').dialog('open');" />
</form>

<div id="divSelect" style="display:none">
    <form>
        <select name="lotsofoptions">
        <option value="1">option 1</option>
        <option value="2">option 2</option>
        <option value="3">option 3</option>
        <option value="4">option 4</option>
        <option value="5">option 5</option>
        <option value="6">option 6</option>
        <option value="7">option 7</option>
        <option value="8">option 8</option>
        <option value="9">option 9</option>
        <option value="10">option 10</option>
        <option value="11">option 11</option>
        <option value="12">option 12</option>
        <option value="13">option 13</option>
        <option value="14">option 14</option>
        <option value="15">option 15</option>
        <option value="16">option 16</option>
        <option value="17">option 17</option>
        <option value="18">option 18</option>
        <option value="19">option 19</option>
        <option value="20">option 20</option>
        <option value="21">option 21</option>
        <option value="22">option 22</option>
        <option value="23">option 23</option>
        <option value="24">option 24</option>
        <option value="25">option 25</option>
        <option value="26">option 26</option>
        <option value="27">option 27</option>
        <option value="28">option 28</option>
        <option value="29">option 29</option>
        <option value="30">option 30</option>
        </select>
    </form>
</div>

JS:

$(document).ready(function(){
    // Modal dialogs
    $('#divSelect').dialog( {   autoOpen:false,
                                modal: true,
                                title: 'Unable to scroll',
                                open: function (event, ui) { window.setTimeout(function () { 
jQuery(document).unbind('mousedown.dialog-overlay').unbind('mouseup.dialog-overlay'); }, 100); 
                                    }
                        } );
});

0 个答案:

没有答案