2

Bootstrap 3.0 を使用しており、下部に 2 つの「ボタン」があるモーダル ウィンドウが開いています。1 つは「お問い合わせ」、もう 1 つは「閉じる」です。

誰かが [お問い合わせ] ボタンをクリックすると、モーダル ウィンドウを閉じて、ユーザーが同じページの特定のアンカーに自動的に移動するようにします。

以下は動作しません。ページを目的のアンカーまでスクロールしますが、モーダルウィンドウを閉じないため、ユーザーはこれを見ることができません...

<a class="btn btn-info" data-dismiss="modal" href="#section-contact">Contact Us</a>
4

5 に答える 5

3

閉じるボタンの jquery onclick 関数を試したり考えたりしましたか?

たぶん、モーダルを手動で強制的に閉じることができます（docsを参照）

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

を使用してアンカーに移動します（回答を参照）

$(document.body).scrollTop($('#anchorId').offset().top);

結果は次のようになります。

HTML :

<a class="btn btn-info" href="#" id="contact_btn">Contact Us</a>

jquery :

$('#contact_btn').click(function(){
    $('#myModal').modal('hide');
    $(document.body).scrollTop($('#anchorId').offset().top);
});
于 2013-11-06T12:36:27.727 に答える
2

JS

// .my-anchor = the class of the trigger
$('.my-anchor').on('click', function(e) {
    e.preventDefault();

    // it will search throughout .my-anchor ancestors to find the closest .modal
    $(this).closest('.modal').modal('hide');

    var hash = this.hash;

    $('html, body').animate({ scrollTop: $(hash).offset().top }, 300);
});

HTML

// clicking this link will close the modal and scroll to wherever #products is located on the page
<a href="#products" className="my-anchor">Click Here</a>

この例では、ハッシュは #products になりますが、他のアンカーに更新されます。

于 2016-08-08T00:40:28.987 に答える