如何将一个模态放在一边-显示其他模态(像..这样的向导）

How to slide aside a modal - revealing other modal (wizard like...)

本文关键字：模态 其他 显示 向导 一个 在一边      更新时间：2023-09-26

在下面的fiddle中，我实现了两个类似向导的模式：

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

http://jsfiddle.net/nV8XZ/show

http://jsfiddle.net/nV8XZ/

我不需要在模态之间切换（显示/隐藏），而是需要将第一个模态设置为动画，直到消失，露出第二个模态。

编辑：

我已经设法实现了滑动，但它只在第一次运行时按预期工作。连续运行不滑动，但切换（直到页面刷新）

请参阅：http://jsfiddle.net/nV8XZ/22

第2版：

感谢ridecar2的帮助，

这里有一个增强的工作版本：

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

您可以尝试fadeIn和fadeOut方法：

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

演示

在以后的jsFiddle中，您需要执行以下操作：

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

$('#secondmodal').width('1px');是一条重要的线，因为它每次使用时都会将第二个模态区域的宽度设置回1px。

相关文章：