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。

bootstrap模态在删除之前打开第二模态确认

2 个答案: