OK-und Abbrechen-in ein bootstrap modal

Ich würde am Liebsten eine klassische OK-und Abbrechen-Konzept in ein bootstrap modal.

<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="myModalLabel">Modal title</h4>
  </div>
  <div class="modal-body">
      user can select an option here from a list
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
    <button type="button" class="btn btn-primary">OK</button>
  </div>
</div>

In den Modell-Inhalten ein, und der Benutzer kann wählen Sie eine der Optionen. Wenn Sie auf OK geklickt wird, würde ich gern die Handhabung der neuen option. Wenn nicht, ist keine Aktion erforderlich. Für die, die ich Haken an den verstecken.bs.modal-Ereignis, aber das wird aufgerufen, wenn auf Abbrechen geklickt wird.

Wie kann ich unterscheiden zwischen Abbrechen und OK-Tasten?

InformationsquelleAutor Paul | 2017-02-08
  1. 4

    Gut, Bootstrap nicht unterstützt bestimmte modale Ereignisse für die modal-Aktionen-buttons. So, ich glaube, Sie haben, um die Ereignisse behandeln, die sich selbst so gerne.

        $("#myModal").on("click","btn-default", function(){
       //code
    });

    $("#myModal").on("click","btn-primary", function(){
       //code
    });
    • Bitte korrigieren Sie den code : '$("#myModal").on("click",".btn-default",function(){ // code })' und '$("#myModal").on("click",".btn-primary",function(){ // code })'
    InformationsquelleAutor Piyush
  2. 1

    Können Sie einfach hinzufügen eine click-Ereignis zu OK-Taste? Wenn Sie nicht hinzufügen e.preventDefault() zu Ihrer Veranstaltung können Sie in der Regel.

    Zuerst fügen Sie die OK Taste eine endgültige ID-oder class-name:

    <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="myModalLabel">Modal title</h4>
    </div>
    <div class="modal-body">
      user can select an option here from a list
      <select name="select" id="select1">
        <option value="1">1</option>
        <option value="2" selected="selected">2</option>
        <option value="3">3</option>
      </select>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
      <button type="button" id="btn_ok_1" class="btn btn-primary">OK</button>
    </div>
  </div>
</div>

    Dann hinzufügen eine click-Ereignis für diese Schaltfläche zu:

    $("#btn_ok_1").click(function (e) {
  var selectedOption = $('select#select1 option:selected').val;

  //Do some work with selected item.
})
    InformationsquelleAutor Valour
Schreibe einen Kommentar