Bootstrap modal close button

Question

I have a problem with the close modal in bootstrap. When I open a modal windows with data (Varying modal content based on trigger button). This is the example in http://getbootstrap.com/javascript/#modals

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" id="btnclose" data-dismiss="modal">Close</button>
        <button type="button" id="btnsend" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

This is okay but if I close the modal and open using another button, when I click on the send button, it prints in console the recipient value of the first modal and this modal. But I need only print the last recipient value. I don't understand why it stacked the events of the previous modal close. This is my jQuery code, for both buttons:

    $('#exampleModal').on('show.bs.modal', function (event) {

    var button = $(event.relatedTarget) // Button that triggered the modal
    var recipient = button.data('whatever') // Extract info from data-* attributes
    // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
    // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
    var modal = $(this)
    modal.find('.modal-title').text('New message to ' + recipient)
    modal.find('.modal-body input').val(recipient)

    $("#btnsend").one("click", function(){
        console.log('Pinchado')
      console.log(recipient)
    })

    $("#btnclose").one("click", function(){
        console.log('Cerrando...')
    })

    $('#exampleModal').on('hidden.bs.modal', function (e) {
      console.log('Cerrada');
    })

  })

Thanks you very much and I hope anyone can help me. https://jsfiddle.net/DTcHh/28480/

Answer 1

This is the old way you or you can say conventional way you are doing this. Still it has the answers. just bind hide and click eventds outside the show event bind.

$('#exampleModal').on('show.bs.modal', function(event) {

   var button = $(event.relatedTarget) // Button that triggered the modal
   var recipient = button.data('whatever') // Extract info from data-* attributes
     // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
     // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
   var modal = $(this)
   modal.find('.modal-title').text('New message to ' + recipient)
   modal.find('.modal-body input').val(recipient)
 })
 
 $("#btnsend").on("click", function() {
     console.log('Pinchado')
     console.log(recipient)
   })

   $("#btnclose").on("click", function() {
     console.log('Cerrando...')
   })

   $('#exampleModal').on('hidden.bs.modal', function(e) {
     console.log('Cerrada');
   })

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="exampleModalLabel">New message</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" id="btnclose" data-dismiss="modal">Close</button>
        <button type="button" id="btnsend" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

Given below is the modern way of doing it. You can refer this link for further details of the way of creating modal dynamically.

function open_modal(name) {

  var message = $('#frm_1');
  BootstrapDialog.show({
    title: 'New message to ' + name,
    message: $('#frm_1'),
    onshown : function() {
      $('#recipient-name').val(name);
    },
    onhide : function(dialog) {
      $('#hidden-div').append(message);
    },
    buttons: [{
      label: 'Close',
      action: function(dialog) {
        dialog.close();
      }
    }, {
      label: 'Send message',
      cssClass: 'btn btn-primary',
      action: function(dialog) {
        // Do whatever send message does, here
      }
    }]
  });



}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>

<button type="button" class="btn btn-primary" onclick="open_modal('@mdo')">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" onclick="open_modal('@fat')">Open modal for @fat</button>
<button type="button" class="btn btn-primary" onclick="open_modal('@getbootstrap')">Open modal for @getbootstrap</button>

<div id="hidden-div" style="display : none">

  <form id="frm_1">
    <div class="form-group">
      <label for="recipient-name" class="control-label">Recipient:</label>
      <input type="text" class="form-control" id="recipient-name">
    </div>
    <div class="form-group">
      <label for="message-text" class="control-label">Message:</label>
      <textarea class="form-control" id="message-text"></textarea>
    </div>
  </form>


</div>