Détails de l'exemple d'attributs de modalité et de modalité dans bootstrap

Si avez besoin d'utiliser des boîtes de dialogue dans votre travail, vous pouvez jeter un coup d'œil

<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">
            Gestion des menus en avant-plan
          </h4>
        </div>
          <div class="modal-body">
            <div>
              <table width="100%" border="0" class="userCon_"2">
                <tr>
                  <th width="30%">Nom : </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>Type d'action : </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>Chemin : </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>Tri : </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">fermer</button>
            <button type="submit" class="btn btn-primary" id="btnSave">enregistrer</button>
          </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal -->
  </div>

Le modal a une propriété qui évite que le clic sur la couche de masquage ferme le modal. Il s'agit de l'attribut data-backdrop="static". Cela permet d'éviter que les opérations involontaires ne ferment le modal lorsque vous entrez du contenu dans le modal.

Il existe également une autre propriété : data-keyboard="false". Cela permet de désactiver l'effet de sortie lorsque la touche ESC est pressée. Cela évite également les opérations involontaires qui pourraient fermer le modal.

<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>Ajouter
      </button>
      <button id="btn_edit" type="button" class="btn btn-newAdd">
        <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>Modifier
      </button>
      <button id="btn_delete" type="button" class="btn btn-newAdd">
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>Supprimer
      </button>
</div>

Les attributs de bouton data-toggle="modal" data-target="#userModal" ouvre le modal.

Déclaration : Le contenu de cet article est tiré d'Internet, propriété des auteurs respectifs. Le contenu est contribué et téléchargé par les utilisateurs d'Internet de manière volontaire. Ce site ne détient pas de droits de propriété, n'a pas été édité par l'homme, et n'assume aucune responsabilité juridique connexe. Si vous trouvez du contenu présumé enfreignant les droits d'auteur, vous êtes invité à envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournir des preuves pertinentes. Une fois vérifié, ce site supprimera immédiatement le contenu présumé enfreignant les droits d'auteur.)