jquery - 从另一个模态打开一个模态并关闭第一个(启动)模态

Question

我正在使用 Bootstrap Modal Window 插件，它工作正常，但我想在单击“下一步”并关闭第一个模型窗口时打开另一个模型窗口。我该怎么做？

$('[data-toggle="modal"]').click(function(e) 
    {
        e.preventDefault();
        var url = $(this).attr('href');
        if (url.indexOf('#') == 0)
        {
            $(url).modal('open');
        } 
        else 
        {
            $.get(url, function(data) 
            {
                $(data).modal();
            }).success(function() { $('input:text:visible:first').focus(); });
        }
    });

<a href="next.html" data-toggle="modal">Add Record</a>

next.html 文件代码

<div class="modal fade" id="compose-modal" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">First Window</h4>
            </div>
            <form action="#" method="post">

                <div class="modal-footer clearfix">
                    <button type="button" data-dismiss="modal">Discard</button>

                    <button type="submit">Submit</button>
                     <a href="next2.html" data-toggle="modal" >Next</a>
                </div>
            </form>
        </div>
    </div>
</div>

Answer 1

您正在从另一个模式打开一个模式并关闭第一个模式。如果您使用的是 Bootstrap 3，则可以执行以下操作:

演示:http://jsbin.com/venek/1/edit

在第一个模态中放置指向下一个模态的链接(#modal-1 和 #modal-2 是示例 ID)

  <a href="#modal-2" data-toggle="modal" data-dismiss="modal">Next</a>

在第二个模态中放置第一个模态的链接:

  <a href="#modal-1" data-toggle="modal" data-dismiss="modal">Previous</a>

演示:http://jsbin.com/venek/1/edit