Bootstrap Modal и значки

Question

У меня есть следующие строки кода на моей интернет-странице - example/demo.

HTML:

<p data-toggle="modal" data-target="#messagesModal"><a href="#">Messages <span class="badge">2</span></a> 
</p> 

<!-- Modal --> 
<div class="modal fade" id="messagesModal" role="dialog"> 
    <div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Messages</h4> 
     </div> 

     <div class="modal-body"> 
     <div class="alert fade in"> 
      <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> 
      <strong>Message 01</strong>: 
      <p>Lipsum Ipsum 
      </p> 
     </div> 

     <div class="alert fade in"> 
      <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> 
      <strong>Message 02</strong>: 
      <p>Ipsum Lipsum</p> 
     </div> 
     </div> 

     <div class="modal-footer"> 
     <div class="col-md-8 pull-left"> 
     </div> 

     <div class="col-md-4"> 
      <button type="button" class="btn btn-default pull-right" data-dismiss="modal">Close</button> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Как я могу обновить значок, чтобы представить правильное количество сообщений в модальный?

Например, когда пользователь закрывает или удаляет сообщение в модальном формате, значок будет отображаться с номера 2 до 1?

Кроме того, можно ли отображать текст «Нет сообщений.« Когда все сообщения были удалены?

Answer 1

Ну ... Я потратить некоторое время, но все, что вы должны сделать сейчас: сообщение массив

1. заселить с фактическими данными;
2. Для получения более подробной информации, пожалуйста, отправьте SMS с текстом AJAX.

Итак ...

$(function() { 
 
    var informer = $("#messageInformer a"); 
 
    var refreshBadge = function(messageCount) { 
 
     var badge = informer.find(".badge"); 
 
     if (messageCount > 0) { 
 
      if (!badge.length) { 
 
       informer.text("Messages "); 
 
       informer.append("<span class=\"badge\">" + messageCount + "</span>"); 
 
      } else { 
 
       badge.text(messageCount); 
 
      } 
 
     } else { 
 
      informer.text("No messages"); 
 
     } 
 
    }; 
 

 
    var buildMessage = function(message) { 
 
     var htmlMessage = "<div class=\"alert fade in\">"; 
 
     htmlMessage += "<a href=\"#\" class=\"close\" data-dismiss=\"alert\" aria-lable=\"close\" data-id=\"" + message.id + "\">&times;</a>"; 
 
     htmlMessage += "<strong>" + message.title + "</strong>:"; 
 
     htmlMessage += "<p>" + message.text + "</p>"; 
 
     return htmlMessage; 
 
    } 
 

 
    // There should be real data 
 
    var messages = [ 
 
     { id: "1", title: "Message 01", text: "Lipsum Ipsum" }, 
 
     { id: "2", title: "Message 02", text: "Ipsum Lipsum" }]; 
 

 
    refreshBadge(messages.length); 
 

 
    informer.on("click", function(e) { 
 
     e.preventDefault(); 
 
     var modalBody = $(".modal-body"); 
 
     modalBody.empty(); 
 
     for (var i = 0; i < messages.length; i++) { 
 
      modalBody.append(buildMessage(messages[i])); 
 
     } 
 
    }); 
 

 
    $("body").delegate(".alert .close", "click", function() { 
 
     var messageId = $(this).data("id"); 
 
     // There should be some AJAX possibly 
 
     messages = messages.filter(function(el) { 
 
      return el.id != messageId; 
 
     }); 
 
     if (messages.length == 0) { 
 
      $("#messagesModal").modal("hide"); 
 
     } 
 
     refreshBadge(messages.length); 
 
    }); 
 
});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
<p data-toggle="modal" data-target="#messagesModal" id="messageInformer"><a href="#">Messages <span class="badge"></span></a> 
 
</p> 
 

 
<!-- Modal --> 
 
<div class="modal fade" id="messagesModal" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Messages</h4> 
 
     </div> 
 

 
     <div class="modal-body"> 
 
     </div> 
 

 
     <div class="modal-footer"> 
 
     <div class="col-md-8 pull-left"> 
 
     </div> 
 

 
     <div class="col-md-4"> 
 
      <button type="button" class="btn btn-default pull-right" data-dismiss="modal">Close</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Попробуйте это:

//Find message number initially, before editing 
    $(".badge").text($(".alert").length);  

//when the modal is closed 
    $('#messagesModal').on('hidden.bs.modal', function() {  
//Set .badge text equal to the length of the .alert array, i.e the number of messages 
    $(".badge").text($(".alert").length);  

//If there are no '.alert' divs, i.e. no messages 
    if ($(".alert").length == 0) {  
     $(".badge").text("No messages"); 
    } 
}); 

Это занимает все .alert элементов (сообщения) в массив, и видит, как долго это массив (т.е. сколько сообщений есть).
Затем он обновляет .badge, чтобы отразить это число.

Рабочая JSFiddle: http://jsfiddle.net/joe_young/62hbqmtp/