4

次のフィドルで、ウィザードのように機能する 2 つのモーダルを実装しました。

$('#jumptosecondmodal').click(function(e) {
    $('#secondmodal').modal('show');
    $('#firstmodal').modal('hide');
})

http://jsfiddle.net/nV8XZ/show

http://jsfiddle.net/nV8XZ/

モーダルを切り替える (表示/非表示) 代わりに、最初のモーダルをアニメートして、消えるまで脇に置き、2 番目のモーダルを表示する必要があります。

編集：

なんとかスライドを実装しましたが、最初の実行でのみ期待どおりに機能します。連続実行はスライドせずにトグルします (ページが更新されるまで)

参照: http://jsfiddle.net/nV8XZ/22

編集2:

助けてくれてありがとうridecar2、

そして、ここに拡張された作業バージョンがあります:

http://jsfiddle.net/nV8XZ/27/show

4

2 に答える 2

1

fadeIn次のfadeOut方法を試すことができます。

$('#jumptosecondmodal').click(function(e) {
    $('#firstmodal').fadeOut(400, function(){
        $(this).modal('hide')
        $('#secondmodal').fadeIn().modal('show')
    })
})

デモ

于 2012-08-06T20:05:18.710 に答える
0

後のjsFiddleでは、次のことを行う必要があります。

$('#jumptosecondmodal').click(function(e) {
  $('#secondmodal').width('1px');
  $('#secondmodal').modal('show');
  $('#secondmodal').animate({width: 400}, 2500, function(){
    $('#firstmodal').modal('hide');
  })
})

$('#secondmodal').width('1px');は、使用するたびに2番目のモーダル領域の幅を1pxに戻すための重要な線です。

于 2012-08-07T13:47:28.857 に答える