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 に答える