Detaillierte Erklärung der Modalbox- und Modalbox-Eigenschaften in Bootstrap

Wer in der Arbeit Modaldialoge benötigt, kann sich das ansehen

<div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="btnCancel">
            ×
          </button>
          <h4 class="modal"-title" id="myModalLabel">
            Vordergrundmenüverwaltung
          </h4>
        </div>
          <div class="modal-body">
            <div>
              <table width="100%" border="0" class="userCon_"2">
                <tr>
                  <th width="30%">Name：</th>
                  <td width="70%">
                    <input type="text" name="Name" class="form-control" style="border-radius:3px; width:220px;" id="txtName" required="" aria-required="true">
                  </td>
                </tr>
                <tr>
                  <th>Handlungstyp：</th>
                  <td>
                    <select class="selectpicker show-tick" id="txtType" style="height: 30px; width: 220px;" name="Type">
                      <option value="view">view</option>
                      <option value="click">click</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <th>Path：</th>
                  <td>
                    <input type="text" name="Url" class="form-control" style="border-radius:3px; width:220px;" id="txtUrl" required="" aria-required="true" />
                  </td>
                </tr>
                <tr>
                  <th>Sortierung：</th>
                  <td>
                    <input type="text" name="Rank" class="form-control" style="border-radius:3px; width:220px;" id="txtRank" />
                    <input type="hidden" name="MainMenuGuid" value="" id="txtMainMenuGuid" />
                  </td>
                </tr>
              </table>
            </div>
          </div>
          <div class="modal-footer" style="border-top:none;">
            <button type="button" class="btn btn-default" data-dismiss="modal" id="btnClose">schließen</button>
            <button type="submit" class="btn btn-primary" id="btnSave">speichern</button>
          </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal -->
  </div>

Der Modaldialog hat eine Eigenschaft, die verhindert, dass durch Klicken auf die Überlagerung das Modaldialog geschlossen wird. Dies ist durch die in div gesetzte data-backdrop="static". Dies verhindert, dass ein plötzlicher Missgriff beim Eingeben von Inhalten im Modaldialog das Modaldialog schließt.

Darüber hinaus gibt es eine weitere Eigenschaft: data-keyboard="false". Dies dient dazu, die Taste ESC als Exit-Taste ungültig zu machen. Dies geschieht ebenfalls, um versehentliche Missoperationen zu vermeiden, die zu einem vorzeitigen Schließen des Modaldialogs führen könnten.

<div id="toolbar" class="btn-group">
      <button id="btn_add" type="button" class="btn btn-newAdd" data-toggle="modal" data-target="#userModal">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>neu hinzufügen
      </button>
      <button id="btn_edit" type="button" class="btn btn-newAdd">
        <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>bearbeiten
      </button>
      <button id="btn_delete" type="button" class="btn btn-newAdd">
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>löschen
      </button>
</div>

wird in den Button-Attributen data-toggle="modal" data-target="#userModal" öffnet das Modaldialog.

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheberrechtsinhaber. Der Inhalt wurde von Internetnutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie verdächtige Urheberrechtsinhalte finden, sind Sie herzlich eingeladen, eine E-Mail an notice#w zu senden.3codebox.com (Bitte ersetzen Sie # durch @ beim Senden einer E-Mail zur Meldung von Verstößen und stellen Sie relevante Beweise zur Verfügung. Sobald nachgewiesen, wird diese Website den verdächtigen Inhalten sofort entfern.)