StackOverflow - Bootstrap Modal Messages Update Badge Count

http://stackoverflow.com/questions/31927799/bootstrap-modal-and-badges/31927970#31927970

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<p data-toggle="modal" data-target="#messagesModal"><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">4</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 class="alert fade in"> <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
               <strong>Message 03</strong>:
               <p>Lipsum Ipsum</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>

JavaScript

$(document).ready(function() {

   $(".badge").text($(".alert").length);

   $('#messagesModal').on('hidden.bs.modal', function() {

      $(".badge").text($(".alert").length);

      if ($(".alert").length == 0) {
         $(".badge").text("No messages");
      }
   });
});