启动模态打开第二模态，删除前请确认

Question

我已经试着让这个工作了几个小时了，但是我遇到了麻烦，所以我真的需要一些帮助。

我想做一个确认模态与取消和删除按钮，将打开第二个模态确认弹出，其中用户做出实际的删除选择。

例如，当取消按钮(在两个确认弹出窗口上)被选中时，我不想发生任何事情。

当用户选择第一个确认模态上的Delete按钮时，第二个确认模态将显示不同的消息，其中包含Cancel和Delete按钮，其中执行实际的删除请求。

第一个确认模态消息应该是:"你确定要删除这个值吗?"

第二个确认模态信息应该是:"Are you really sure?"

这是我的按钮代码:

<a href="{% url x_delete x.id %}" delete-confirm="Are you sure you want to delete this value?">Delete</a>

这是我的js代码:

        $(document).ready(function() {
        //START: Delete code.
        $('a[delete-confirm]').click(function(ev) {
            var href = $(this).attr('href');
            if (!$('#deleteConfirmModal').length) {
                $('body').append('<div id="deleteConfirmModal" class="modal" role="dialog" aria-labelledby="deleteConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button><h4 class="modal-title" id="deleteConfirmLabel">Delete - X</h4></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>&nbsp;&nbsp;<a class="btn-u btn-u-red" id="deleteConfirmOK" onclick="showProgressAnimation();">Delete</a></div></div>');
            }
            $('#deleteConfirmModal').find('.modal-body').text($(this).attr('delete-confirm'));
            $('#deleteConfirmOK').attr('href', href);
            $('#deleteConfirmModal').modal({show:true});
            return false;
        });
        //FINISH: Delete code.
    });

Answer 1

Bootstrap不支持同时打开多个模态

Answer 2

你可以试试这个插件，http://jschr.github.io/bootstrap-modal/，有一个可堆叠的模式