En son web geliştirme öğreticiler
 

Bootstrap JS Modal

❮ Önceki Sonraki Referans ❯

JS modal (modal.js)

Modal eklentisi geçerli sayfanın üst kısmında görüntülenen bir iletişim kutusu / açılan penceredir.

Modals hakkında bir eğitim için bizim okumak Bootstrap Modal Eğitimi .

Modal Eklenti Sınıflar

Sınıf Açıklama
.modal Bir kalıcı oluşturur
.modal-content Stiller düzgün sınırına background-color vs. ile modal modal olarak en başlık, gövde ve altbilgi eklemek için bu sınıfını kullanın.
.modal-header modal başlığına için stil tanımlar
.modal-body modal vücut için stilini tanımlar
.modal-footer modal altbilgi için stilini tanımlar. Not: Bu alan sağa hizalanmış varsayılan gereğidir. Bunu değiştirmek için text-align ile CSS üzerine: left | center
.modal-sm Küçük bir modal belirtir
.modal-lg Büyük bir modal belirtir
.fade Ekler ve dışarı modal kaybolur bir animasyon / geçiş etkisi

Modal Via: Trigger data-* Öznitelikler'i

Ekle data-toggle="modal" ve data-target="#modalID" herhangi bir öğeye.

Not: For <a> elemanları, ihmal data-target ve kullanımı href="#modalID" yerine:

Örnek

<!-- 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>
Kendin dene "

Tetik Via JavaScript

el ile etkinleştirme:

Örnek

$("#myModal").modal()
Kendin dene "

modal Seçenekler

Seçenekler Veri özellikleri veya JavaScript aracılığıyla geçirilebilir. Veri özelliklerini için, olduğu gibi, veriye seçeneği adını ekler data-backdrop="" .

isim tip Varsayılan Açıklama Dene
backdropboolean or the string "static" true Modal karanlık bindirmeniz belirtir:

  • true - karanlık bindirme
  • false - hayır bindirme (transparent)

Eğer değer belirtirseniz "static" , bunun dışında tıklandığında kalıcı kapatmak mümkün değildir

JS kullanma kullanma verileri
keyboardbooleantrue Modal kaçış tuşuyla kapatılabilir belirtir (Esc) :

  • true - Modal ile kapatılabilir Esc
  • false - Modal ile kapatılamaz Esc
JS kullanma kullanma verileri
showbooleantrue başlatıldı zaman kalıcı göstermek belirtir JS kullanma kullanma verileri

modal Yöntemleri

Aşağıdaki tabloda mevcut tüm modal yöntemlerini listeler.

Yöntem Açıklama Dene
. modal( options ) Bir modal gibi içerikleri etkinleştirir. Geçerli değerler için yukarıdaki seçeneklere bakın Dene
. modal("toggle") modal açar Dene
. modal("show") modal açar Dene
. modal("hide") modal gizler Dene

modal Olaylar

Aşağıdaki tabloda mevcut tüm modal olayları listeler.

Olay Açıklama Dene
show.bs.modal Modal gösterildiği üzere olan oluşur Dene
shown.bs.modal Modal tamamen gösterildiğinde gerçekleşir (CSS geçişleri tamamladıktan sonra) Dene
hide.bs.modal Modal gizli üzeredir oluşur Dene
hidden.bs.modal Modal tamamen gizlidir oluşur (CSS geçişleri tamamladıktan sonra) Dene
Örnekler

Örnekler

Giriş Modal

Aşağıdaki örnek oturum açmak için bir modal oluşturur:

Örnek

<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>
Kendin dene "

❮ Önceki Sonraki Referans ❯