引导程序模态打开第二个模态在删除之前进行确认

Question

我一直在尝试使它工作几个小时，但是我遇到了麻烦，因此我确实需要一些帮助。

我想使用“取消”和“删除”按钮创建一个确认模式，这将打开第二个模式确认弹出窗口，用户可以在其中进行实际的删除选择。

例如，当选择“取消”按钮（在两个确认确认弹出窗口上）时，我什么也不想发生。

当用户选择第一个确认模式上的“删除”按钮时，将显示第二个确认模式，并带有“取消”和“删除”按钮的不同消息，用于执行实际的删除请求。

第一条确认模式消息应为：“确定要删除此值吗？”

第二条确认模式消息应为：“您真的确定吗？”。

这是我的按钮代码：

<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/ ，其中有一个Stackable Modal。