title: Close Bootstrap Alert based on modal confirm dialog choice
body: <p>The button below that has the data-dismiss="alert" attribute displays a Bootstrap 2 modal dialog so the user can confirm whether or not to close the alert.  </p>
  
  <p>Right now <strong>the Bootstrap "alert" (which is a div on the UI, not a popup) closes before the user even selects anything in the modal confirm popup</strong>.</p>
  
  <p>How can I get the Bootstrap "alert" (div)  to close or stay open based on what the user chooses in the modal popup dialog?</p>
  
  <pre><code>&lt;div class="span8 see-all-notifications"&gt;
      &lt;div id="notification-list" class="module main-slot-c"&gt;
  
              @foreach (var notification in Model.Notifications)
          {
              &lt;div class="noti-alert"&gt;
                  &lt;div class="alert alert-info"&gt;
                      &lt;button type="button" class="close" data-dismiss="alert"
                              data-notificationid="@notification.NotificationId"
                              data-contactpointid="@notification.ContactPointId"
                              data-apiurl="@Url.Content("~/api/account/")"&gt;
                          x
                      &lt;/button&gt;
                      &lt;h5&gt;
                          &lt;i class="icon-file @notification.EventCategoryIdentifier"&gt;&lt;/i&gt; @notification.Description &lt;span&gt;Reported at @notification.RaisedDate&lt;/span&gt;
                      &lt;/h5&gt; 
                      &lt;div class="noti-collapse"&gt;
                          &lt;div class="noti-collapse-inner"&gt;
                              @notification.Body
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          }
  
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="deleteNotificationConfirmModal" class="modal hide fade in" style="display: none; "&gt;
      &lt;div class="modal-header"&gt;
          &lt;a class="close" data-dismiss="modal"&gt;×&lt;/a&gt;
          &lt;h3&gt;Confirm Deletion of Notification&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
          &lt;h4&gt;Are you sure you want to delete the notification?&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;a id="notificationDeleteConfirm" href="#" class="btn btn-success"&gt;Delete Notification&lt;/a&gt;
          &lt;a href="#" class="btn" data-dismiss="modal"&gt;Close&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>Here's the relevent part of the javascript file</p>
  
  <pre><code>// This function wires up the code to "close" the notification (set status to "Read")
  $('.noti-alert').each(function(){
      $(this).bind('close', function () {
  
          var notificationId = $(this).find('button').data('notificationid');
          var contactpointId = $(this).find('button').data('contactpointid');
          var url = $(this).find('button').data('apiurl');
  
          $("#deleteNotificationConfirmModal").modal('show');
  
          $('#notificationDeleteConfirm').on('click', function () {
  
  
              //"Delete" the notification --&gt; CloseNotification method in api controller
              $.ajax({
                  type: "POST",
                  url: url, 
                  data:{
                      notificationid: notificationId,
                      contactpointid: contactpointId
                  },
                  success: function (data) { },
                  error: function (err) {
                      alert("error" + err.status + " " + err.statusText);
  
                  }
  
              });
  
              $('#deleteNotificationConfirmModal').modal('hide');
  
  
  
          });
  
  
  
      });
  });
  </code></pre>
  
  <p>});</p>
  
  <p><strong>EDIT:   Here's the final code I got to work.  I needed to call <code>e.preventDefault</code> and then close the "alert" by calling the <code>thisAlert.remove();</code> method in the ajax success callback</strong></p>
  
  <pre><code>// 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 --&gt; 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');
                  });
  
  
  
              });
          });
  
      });
  </code></pre>