模态引导用户确认

Modal Bootstrap User Confirmation

本文关键字：确认用户模态更新时间：2023-09-26

如何创建一个等待用户确认是否真的想要删除数据的JQuery函数

我怎样才能做到这样呢?

function UserConfirmation()
{
  ShowModal();    //"Global" Delete Confirmation Bootstrap Modal
  //Now wait till the user decides whether or not he really wants to 
  //delete data(Button events or on Modal hide).
  //On user reply:
  if(UserReplied == 'Delete')
  {}
  else
  {} 
}

编辑:

这是Layout中Modal的html代码。这个ModalDelete可以在需要的时候通过ShowModal()函数调用。

<!-- Delete Data Confirmation Modal -->
    <div class="modal fade" id="ModalDelete" role="dialog" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-sm">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" id="btn-cancel" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Confirm Delete</h4>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" id="btn-cancel" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger btn-delete" id="btn-delete" data-dismiss="modal">Delete</button>
                </div>
            </div>
        </div>
    </div>

函数UserConfirmation在调用ShowModal()后监听模态事件，并根据用户的选择继续按下按钮或模态隐藏。

我认为这可以通过承诺或延期行动来实现。

好了，下面是我如何使用Jquery deferred的promise来解决这个问题:

这个函数监听，直到用户点击#ModalDelete中的按钮，并返回被点击按钮的id。

function ModalOptionChoosen() {
var deferred = $.Deferred();
$('#ModalDelete button').on('click', function (e) {
    var $target = $(e.target); // Clicked button element
    $(this).closest('.modal').on('hidden.bs.modal', function () {
        //console.log($target); // Logged if the clicked button actually closed the modal
        var result = $target.attr('id');
        deferred.resolve(result);
    });
});
return deferred.promise();
};

而另一个函数等待上面的承诺返回ModalOptionChoosen()

function ShowModalWaitForResult () {
    ShowModal();
    var promise = ModalOptionChoosen();
    promise.done(function (result) {
        console.log(result); // log the user selected value
    });
});

现在我可以引用ModalOptionChoosen函数的任何地方，如果需要

例如，您可以使用http://nakupanda.github.io/bootstrap3-dialog，然后在需要删除确认时使用如下内容:

BootstrapDialog.show({
    title: 'Alert',
        message: 'Are you sure you want to delete this ?',
        buttons: [{
            label: 'Yes',
            cssClass: 'btn-danger',
            action: function(dialog) {
                dialog.close();
                //your action
            }
        }, {
            label: 'No',
            action: function(dialog) {
                dialog.close();
            }
        }]
    });`