如何使用jquery隐藏模态并显示另一个模态？

Question

我打开一个模态，然后点击模态中的div我要关闭该模态并打开另一个模态。但是，当我这样做时，它会关闭第一个模态并仅显示第二个模态的背景，而不会显示主体。

我的HTML是：

<div id="test-modal" class="modal hide fade" data-keyboard="true">
    <div class="modal-body">
       <div id="option"><p>Click here to show the next modal</p></div>
    </div>
</div>

<div id="test-modal2" class="modal hide fade" data-keyboard="true">
    <div class="modal-body">
       <p>modal show after a hide doesn't work?</p>
    </div>
</div> 

我的jquery是：

$('.option').click(function() {
    $('#test-modal').modal('hide');
    $('#test-modal2').modal('show');

});

Answer 1

这可以提供帮助：

1. 从modals divs
中删除hide类
2. 您在选择器中使用.option，但在html中使用id="option"，因此请更改它们

工作version

Answer 2

请尝试在关闭按钮上使用此数据关闭属性。

 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

Answer 3

我的愚蠢错误jquery工作。我意外地没有正确关闭第一个模态，这就是为什么动画不会完成并导致第二个模态无法加载。我只是将第二模态放在第一个模态的顶部进行测试，然后就可以了。