Ultimele tutoriale de dezvoltare web
 

Bootstrap JS Modal

❮ Anterior Următor Referință ❯

JS Modal (modal.js)

Modali plugin-ul este o fereastră de casetă / pop-up de dialog care este afișată în partea de sus a paginii curente.

Pentru un tutorial despre modals, citiți Bootstrap Modal Tutorial .

Clasele Modal Plugin

Clasă Descriere
.modal Creează un modal
.modal-content Stiluri modal corect cu frontieră, culoare de fundal, etc. Utilizați această clasă pentru a adăuga modal de antet, corp, și un subsol.
.modal-header Definește stilul pentru antetul modal
.modal-body Definește stilul pentru corpul modal
.modal-footer Definește stilul de subsol în modal. Notă: Această zonă este aliniat la dreapta în mod implicit. Pentru a schimba acest lucru, suprascrie CSS cu text-align: left | centru
.modal-sm Specifică un mic modal
.modal-lg Specifică un mare modal
.fade Adaugă un efect de animație / tranziție care se estompează modal și în afară

Declanșa Modal Via data-* Atribute

Adăugați data-toggle="modal" de data-target="#modalID" data-toggle="modal" și data-target="#modalID" la orice element.

Notă: Pentru <a> elemente, omite data-target , și de a folosi href="#modalID" în loc:

Exemplu

<!-- Buttons -->
<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Links -->
<a data-toggle="modal" href="#myModal">Open Modal</a>

<!-- Other elements -->
<p data-toggle="modal" data-target="#myModal">Open Modal</p>
Încearcă - l singur »

Trigger prin JavaScript

Activați manual cu:

Exemplu

$("#myModal").modal()
Încearcă - l singur »

Opțiuni modal

Opțiunile pot fi transmise prin atribute de date sau JavaScript. Pentru atribute de date, adăugați numele opțiune pentru a datelor, la fel ca în data-backdrop="" .

Nume Tip Mod implicit Descriere Incearca-l
backdropboolean or the string "static" true Specifică dacă modal trebuie să aibă o suprapunere de culoare închisă:

  • true - suprapunere întuneric
  • false - fără suprapunere (transparent)

Dacă specificați valoarea "static" , nu este posibil să se închidă modal atunci când faceți clic în afara acesteia

Utilizarea JS Utilizarea datelor
keyboardbooleantrue Specifică dacă modal poate fi închisă cu cheia de evacuare (Esc) :

  • true - modal poate fi închis cu Esc
  • false - modal nu poate fi închis cu Esc
Utilizarea JS Utilizarea datelor
showbooleantrue Specifică dacă să afișeze modal atunci când inițializată Utilizarea JS Utilizarea datelor

modal Metode

Tabelul următor listează metodele modale toate disponibile.

Metodă Descriere Incearca-l
. modal( options ) Activează conținutul ca modal. A se vedea optiunile de mai sus pentru valori valide Incearca-l
. modal("toggle") Modal Activeazã Incearca-l
. modal("show") Deschide modal Incearca-l
. modal("hide") Hides modal Incearca-l

modal Evenimente

Tabelul următor listează evenimente modale toate disponibile.

Eveniment Descriere Incearca-l
show.bs.modal Are loc atunci când modal este pe cale de a fi afișat Incearca-l
shown.bs.modal Are loc atunci când modal este pe deplin demonstrat (după tranzițiile CSS au finalizat) Incearca-l
hide.bs.modal Are loc atunci când modal este pe cale să fie ascunsă Incearca-l
hidden.bs.modal Are loc atunci când modal este complet ascuns (după tranzițiile CSS au finalizat) Incearca-l
Exemple

Exemple

Autentificare Modal

Următorul exemplu creează un modal pentru autentificare:

Exemplu

<div class="container">
  <h2>Modal Login Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-default btn-lg" id="myBtn">Login</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 style="color:red;"><span class="glyphicon glyphicon-lock"></span> Login</h4>
        </div>
        <div class="modal-body">
          <form role="form">
            <div class="form-group">
              <label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
              <input type="text" class="form-control" id="usrname" placeholder="Enter email">
            </div>
            <div class="form-group">
              <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
              <input type="text" class="form-control" id="psw" placeholder="Enter password">
            </div>
            <div class="checkbox">
              <label><input type="checkbox" value="" checked>Remember me</label>
            </div>
            <button type="submit" class="btn btn-default btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
          </form>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-default btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
          <p>Not a member? <a href="#">Sign Up</a></p>
          <p>Forgot <a href="#">Password?</a></p>
        </div>
      </div>
    </div>
  </div>
</div>
Încearcă - l singur »

❮ Anterior Următor Referință ❯