Jquery 基于模式确认对话框选择关闭引导警报

下面具有data dismise=“alert”属性的按钮显示一个Bootstrap 2模式对话框，以便用户确认是否关闭警报

现在引导程序“警报”（是UI上的一个div，不是弹出窗口）在用户选择模式确认弹出窗口中的任何内容之前关闭

如何根据用户在模式弹出对话框中的选择使引导“警报”（div）关闭或保持打开状态

<div class="span8 see-all-notifications">
    <div id="notification-list" class="module main-slot-c">

            @foreach (var notification in Model.Notifications)
        {
            <div class="noti-alert">
                <div class="alert alert-info">
                    <button type="button" class="close" data-dismiss="alert"
                            data-notificationid="@notification.NotificationId"
                            data-contactpointid="@notification.ContactPointId"
                            data-apiurl="@Url.Content("~/api/account/")">
                        x
                    </button>
                    <h5>
                        <i class="icon-file @notification.EventCategoryIdentifier"></i> @notification.Description <span>Reported at @notification.RaisedDate</span>
                    </h5> 
                    <div class="noti-collapse">
                        <div class="noti-collapse-inner">
                            @notification.Body
                        </div>
                    </div>
                </div>
            </div>
        }


    </div>
</div>

<div id="deleteNotificationConfirmModal" class="modal hide fade in" style="display: none; ">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Confirm Deletion of Notification</h3>
    </div>
    <div class="modal-body">
        <h4>Are you sure you want to delete the notification?</h4>
    </div>
    <div class="modal-footer">
        <a id="notificationDeleteConfirm" href="#" class="btn btn-success">Delete Notification</a>
        <a href="#" class="btn" data-dismiss="modal">Close</a>
    </div>
</div>  

}))

编辑：这是我要完成的最后一段代码。我需要调用

e.preventDefault

，然后通过调用

thisAlert.remove（）关闭“警报”方法

// This function wires up the code to "close" the notification (set status to "Read")
        $('.noti-alert').each(function(){
            $(this).bind('close.bs.alert', function (e) {

                e.preventDefault();

                var notificationId = $(this).find('button').data('notificationid');
                var contactpointId = $(this).find('button').data('contactpointid');
                var url = $(this).find('button').data('apiurl');

                $("#deleteNotificationConfirmModal").modal('show');

                // set a reference to the notification so we can remove it in the ajax call below
                var thisAlert = $(this);


                $('#notificationDeleteConfirm').on('click', function () {


                    //"Delete" the notification --> CloseNotification method in api controller
                    $.ajax({
                        type: "POST",
                        url: url, 
                        data:{
                            notificationid: notificationId,
                            contactpointid: contactpointId
                        },
                        success: function (data) {

                            $('#deleteNotificationConfirmModal').modal('hide');
                            thisAlert.remove();
                        },
                        error: function (err) {
                            alert("error" + err.status + " " + err.statusText);
                        }
                    });



                });

                // bind modal's close button click event
                $('.notificationDeleteCancel').on('click', function () {
                    // close modal    
                    //alert('cancel');
                    $("#deleteNotificationConfirmModal").modal('hide');
                });



            });
        });

    });

您应该调用
$（'#deleteNotificationConfirmModal'）.modal（'hide'）
关于您的AJAX调用的
成功
函数

这是因为您使用的是ajax调用（异步）

例如：

 success: function (data) {        
        $('#deleteNotificationConfirmModal').modal('hide');
},

更新了下面的代码：

// This function wires up the code to "close" the notification (set status to "Read")
$('.alert-info').each(function () {
    // show confirmation dialog when closing alert message
    $(this).bind('close.bs.alert', function (e) {
        e.preventDefault();
        $("#myModal").modal('show');
    });
});

// bind modal's close button click event
$('.notificationDeleteCancel').on('click', function () {
    // close modal    
    alert('cancel');
});

// bind modal's delete notification button click event
$('.notificationDeleteConfirm').on('click', function () {
    // do ajax
    alert('delete');

    //"Delete" the notification --> CloseNotification method in api controller
    $.ajax({
        type: "POST",
        url: "/echo/json/",
        data: 'mydata',
        cache: false,
        success: function(json){
            $("#myModal").modal('hide');
            $('.alert-info').alert('close');
        },
        error: function (err) {
            alert( 'error');
        }
    });
});

好的，也许我应该这样做，但问题是让用户界面上的警报保持打开或关闭，基于用户选择的确认对话框选择。我指的“警报”不是弹出窗口，而是引导“警报”，它只是用户界面上的一个div。你试过绑定到
close.bs.alert
？请参阅文档：刚刚尝试绑定到close.bs.alert-它似乎与close绑定相同。我需要的是一种在用户界面上取消关闭的方法，如果用户在模式弹出窗口上选择取消，则可以保持警报可见。问题是，在模式弹出窗口显示之前，只要您单击按钮警报就会关闭。更新了我的代码，使其更独立于按钮单击。。。看起来您必须使用
preventDefault（）
-请参见上面的更新代码和fiddle作为示例。代码可能不是100%完美，但它会让你克服障碍（我相信）你能创建一个小提琴来帮助解决问题吗？
// This function wires up the code to "close" the notification (set status to "Read")
$('.alert-info').each(function () {
    // show confirmation dialog when closing alert message
    $(this).bind('close.bs.alert', function (e) {
        e.preventDefault();
        $("#myModal").modal('show');
    });
});

// bind modal's close button click event
$('.notificationDeleteCancel').on('click', function () {
    // close modal    
    alert('cancel');
});

// bind modal's delete notification button click event
$('.notificationDeleteConfirm').on('click', function () {
    // do ajax
    alert('delete');

    //"Delete" the notification --> CloseNotification method in api controller
    $.ajax({
        type: "POST",
        url: "/echo/json/",
        data: 'mydata',
        cache: false,
        success: function(json){
            $("#myModal").modal('hide');
            $('.alert-info').alert('close');
        },
        error: function (err) {
            alert( 'error');
        }
    });
});