it-swarm.com.de

Bootstrap-Modal-Schaltfläche zum Schließen

Ich habe ein Problem mit dem Close-Modal in Bootstrap. Wenn ich ein modales Fenster mit Daten öffne (Unterschiedlicher modaler Inhalt basierend auf der Auslöser-Schaltfläche). Dies ist das Beispiel 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>

Dies ist in Ordnung, aber wenn ich das Modal schließe und in einer anderen Schaltfläche öffne, klicke beim Klicken auf die Schaltfläche "Senden" im Konsolenprotokoll der Empfängerwert des ersten Modal und dieses Modal. Ich muss aber nur den letzten Empfängerwert ausdrucken. Ich verstehe nicht, warum Stack-Ereignisse früherer Modal-Ereignisse geschlossen werden. Dies ist mein Jquery-Code für beide Tasten:

    $('#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');
    })

  })

Vielen Dank und ich hoffe, dass mir jemand helfen kann . https://jsfiddle.net/DTcHh/28480/

6
Jaris Cano

Dies ist die alte Art, wie Sie oder Sie können konventionell sagen, wie Sie dies tun. Es hat immer noch die Antworten. binden Sie einfach verstecken und klicken Sie auf eventds außerhalb der Show-Ereignisbindung.

$('#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>

Im Folgenden finden Sie eine moderne Vorgehensweise: Sie können sich auf diesen Link beziehen, um weitere Informationen zur dynamischen Erstellung von Modalen zu erhalten.

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>

5
Shalin Patel

In Bootstrap 3.3.7 funktioniert das für mich:

$('#myModal').trigger('click.dismiss.bs.modal')

2
ederrafo