0

我有一个输入，当更改时，会进行一些验证，最终会使用模式显示通知。

问题是，如果在同一页面上有一个选择并且通过单击选择触发输入的“onChange”，则选择的下拉菜单会呈现在模式上并且不会“隐藏”，因为它可以在上看到这个小提琴：http: //jsfiddle.net/GSqvB/

HTML 代码是：

<div id="modal-from-dom" class="modal hide fade">
    <div class="modal-header">
        <a href="#" class="close">×</a>
        <h3>Modal Heading</h3>
     </div>
     <div class="modal-body">
         <p>One fine body…&lt;/p>
     </div>
     <div class="modal-footer">
         <a href="#" class="btn primary">Primary</a>
         <a href="#" class="btn secondary">Secondary</a>
     </div>
 </div>

 <span>Write someting then click the select <input type="text" id="inputToChange">     </input></span>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><span>Click me after filling the input <select><option value="1">This</option><option value="2">should</option> <option value="3">be</option><option value="4">hidden</option></select><span>

模态是这样启动的：

var $modal = $('#modal-from-dom');
$modal.modal({backdrop: true, keyboard: true, show: false});
$('#inputToChange').on('change', function(event) {
    $modal.modal('show');
});

要模拟行为，您必须在输入上写一些东西，然后单击选择。

如果我隐藏选择并在模式关闭时显示它，它可以工作，但这似乎是一个非常丑陋的解决方法。

有没有办法让选择“关闭”或至少留在模式后面？

4

1 回答 1

0

显示模态后，尝试隐藏和显示<select>元素。看到这个小提琴：http: //jsfiddle.net/ZTBGA/4/

$modal.modal('show');
    $("#input2").hide();
    setTimeout(function() {
        $("#input2").show();
    }, 5);

编辑：“有没有办法让选择“关闭”或至少留在模式后面？”

.blur()可能适用于某些浏览器，但不适用于 Chrome。上述解决方案适用于所有人。

于 2013-05-24T14:26:44.367 回答