0

ブートストラップモーダルを使用して確認ダイアログを実装する方法がわかりません。これは機能しないコードです。

<div id="id" class="modal hide">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>title</h3>
    </div>
    <div class="modal-body">
        <p>confirm message</p>
    </div>
    <div class="modal-footer">
        <button data-dismiss="modal" class="btn">No</button>
        <button id="id-confirm" class="btn btn-primary">Yes</button>
    </div>
</div>
<a id="a" href="http://example.com">link</a>
<script type="text/javascript">
    var confirmed = false;
    var modal = $('#id');
    var clickee = $('#a');

    clickee.click(function() {
        if (!confirmed) {
            modal.modal('show');
            return false;
        }
    });
    $('#id-confirm').click(function() {
        confirmed = true;
        clickee.click();
        modal.modal('hide');
    });
</script>

リンクをクリックするとlinkダイアログが表示されますが、確認してもリダイレクトは発生せず、linkもう一度リンクをクリックするとリダイレクトされます。

リンクのhrefにリダイレクトすることもできますが、リンク（a要素）の代わりに再利用可能にしたいので、ボタンを使用したり、ボタンのonclickイベントを定義したりすることもできます。

回答ありがとうございます。

4

3 に答える 3

5

まずこれを理解させてください。

ブートストラップ確認モーダルを開く必要があるリンクをクリックする必要があり、[はい] をクリックすると、ユーザーは別のリンクに移動する必要がありますか?

そうだとすれば：

<a id="a" href="#id" data-toggle="modal">link</a>

そして、id-confirmのボタンクリックでリダイレクトしないのはなぜですか

ブートストラップ モーダルはどの div を開く必要があるかを認識していないため、 href="http://example.com" を削除する必要があります。

于 2012-11-17T21:19:16.890 に答える
2

jQuery では、ユーザーがクリックしたときに -tag をClick()アクティブにせず、添付したタグを呼び出すだけです。<a>onclick=

実際にclickee.click();は、あなたの無名関数clickee.click(function() {を呼び出すだけですが、 true であるため何も起こりませんconfirmed(証明するためにアラートを挿入してみてくださいclick())。2 回目にもう一度クリックすると、クリック イベントはstopPropagationブートストラップによって停止 ( ) されず、通常のリンクのように機能します。それはあなたが経験するものです。

あなたが何を望んでいるのか完全にはわかりませんが、リンクをアクティブにしたい場合は、確認後にリダイレクトするのが最も簡単な方法です（あなたがそれを望んでいなかったことは知っていますが、コードは今のところあるclick()ので、どちらでも行うことはできません）

$('#id-confirm').click(function() {
     confirmed = true;
     window.location=clickee.attr('href');
     modal.modal('hide');
});

が機能し、属性<button>を指定している限り、のような他のタグ タイプで再利用できます。href

于 2012-11-17T21:43:55.430 に答える
2

これを行うライブラリがhttp://bootboxjs.comにあります。YMMV

于 2013-09-12T11:18:42.717 に答える