Question

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

问题在于，如果在同一页面上有一个选择，并且通过单击选择触发输入的“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…</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');
});

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

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

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

Answer 1

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

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

编辑：＆＃34;有没有办法让选择＆＃34;关闭＆＃34;或者至少留在模态之后？＆＃34;

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

选择下拉保留在引导模式上

1 个答案: