0

いくつかの Bootstrap モーダルを含む html ページがあります。jqueryを使用してそれらを閉じたい。しかし、私はそれらを選択するのに問題があります。

これは、html のサンプルです。

<div class="modal-footer span5">
  <input class="btn btn-primary" name="commit" type="submit" value="Save Material">
</div>

そして、この jquery(coffee script) は機能しません:

$(".modal-footer .btn").each.click ->
  alert 'commit'
  $(this).modal "hide"

またはこれ：

  $(".modal-footer .btn").click.each ->
    alert 'commit'
    $(this).modal "hide"

ありがとう！

4

2 に答える 2

2

JS エンジンは Coffeescript を解釈しません。代わりに、そのブロックを最初に JavaScript にコンパイルする必要があります。(または、javascript を直接記述することもできます)。

.modal-footer クラスがデフォルトのブートストラップ モーダルに由来する場合、つまりモーダル html ブロッ​​ク全体の唯一の部分であることを意味し、フッターを閉じるためにハンドラーをアタッチするのに最適な場所ではない可能性があります。

デフォルトのブートストラップには、次のようなデフォルトのモーダル構造が付属しています。

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-    labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…&lt;/p>
    </div>
    <div class="modal-footer">
       <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
       <button class="btn btn-primary">Save changes</button>
    </div>
</div>

これを閉じるには、組み込みのブートストラップ動作を使用するのが最も簡単な方法ですが、モーダルを構成する最も外側の html 要素 (この場合は id="myModal" の div) を参照します。

$('#myModal').modal('hide');

あなたの例では、コンテナのIDがわかっている場合：

$(".modal-footer .btn").click(function(){
    alert('commit');
    $('#myModal').modal('hide');
});

そうでない場合は、前の応答の例のように、一連の .parent() 呼び出しを使用してツリーをたどることができます。

私が何かを見逃していない限り...

于 2013-01-22T17:20:47.427 に答える
1

それはJavaScriptコードではありません。これを試して：

$(".modal-footer .btn").click(function(){
  alert('commit');
  $(this).parent().hide();
});

とにかく、ブートストラップが自動的にモーダルを閉じる場合、jquery でモーダルを閉じる理由がわかりません。

于 2013-01-22T16:38:55.227 に答える