Bootstrap - Modal Eklenti

Kalıcı, ana penceresinin üzerine yerleştirilen bir alt penceredir. Tipik olarak amaç, ana pencereden ayrılmadan bir miktar etkileşime sahip olabilen ayrı bir kaynaktan içeriği görüntülemektir. Alt pencereler bilgi, etkileşim veya daha fazlasını sağlayabilir.

Bu eklenti işlevini ayrı ayrı dahil etmek istiyorsanız, ihtiyacınız olacak modal.js. Aksi takdirde, Bootstrap Eklentilerine Genel Bakış bölümünde belirtildiği gibi , bootstrap.js veya küçültülmüş bootstrap.min.js'yi dahil edebilirsiniz .

Kullanım

Modal eklentinin gizli içeriğini değiştirebilirsiniz -

Via data attributes - Özniteliği ayarla data-toggle = "modal" bir düğme veya bağlantı gibi bir denetleyici öğesinde, data-target = "#identifier" veya href = "#identifier" geçiş yapmak için belirli bir modeli (id = "tanımlayıcı" ile) hedeflemek için.
Via JavaScript - Bu tekniği kullanarak, tek bir JavaScript satırıyla id = "tanımlayıcı" içeren bir modal çağırabilirsiniz -

$('#identifier').modal(options)

Misal

Aşağıdaki örnekte statik bir kalıcı pencere örneği gösterilmektedir -

<h2>Example of creating Modals with Twitter Bootstrap</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
                  &times;
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Add some text here
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
  
</div><!-- /.modal -->

Details of the preceding code −

Kalıcı pencereyi çağırmak için bir tür tetikleyiciye ihtiyacınız var. Bir düğme veya bağlantı kullanabilirsiniz. Burada bir düğme kullandık.
Yukarıdaki koda bakarsanız, bunu <button> etiketinde göreceksiniz, data-target = "#myModal"sayfaya yüklemek istediğiniz modelin hedefidir. Bu kod, sayfada birden çok mod oluşturmanıza ve ardından her biri için farklı tetikleyicilere sahip olmanıza olanak tanır. Şimdi, açık olmak gerekirse, aynı anda birden fazla mod yüklemiyorsunuz, ancak farklı zamanlarda yüklenecek sayfalarda birçok model oluşturabilirsiniz.
Modalde dikkat edilmesi gereken iki sınıf vardır -
- İlk olarak .modal, bu basitçe <div> içeriğini bir modal olarak tanımlamaktır.
- Ve ikincisi .fadesınıf. Modal değiştirildiğinde, içeriğin açılıp kapanmasına neden olur.
aria-labelledby = "myModalLabel", öznitelik mod başlığına başvurur.
Öznitelik aria-hidden = "true" bir tetikleyici gelene kadar Kalıcı Pencereyi görünmez tutmak için kullanılır (ilgili düğmeye tıklamak gibi).
<div class = "modal-header">, modal-header, kalıcı pencerenin başlığı için stili tanımlayan sınıftır.
class = "close", kalıcı pencerenin Kapat düğmesinin stilini belirleyen bir CSS sınıfı kapanışıdır.
data-dismiss = "modal", özel bir HTML5 veri özelliğidir. Burada kalıcı pencereyi kapatmak için kullanılır.
class = "modal-body", kalıcı pencerenin gövdesinin stilini ayarlamak için bir CSS Bootstrap CSS sınıfıdır.
class = "modal-footer", kalıcı pencerenin altbilgisi için stil ayarlamak için Bootstrap CSS'nin bir CSS sınıfıdır.
data-toggle = "modal", HTML5 özel veri özelliği veri geçişi, kalıcı pencereyi açmak için kullanılır.

Seçenekler

Kalıcı Pencerenin görünümünü ve hissini özelleştirmek için veri öznitelikleri veya JavaScript aracılığıyla geçirilebilecek belirli seçenekler vardır. Aşağıdaki tablo seçenekleri listeler -

Seçenek Adı	Tür / Varsayılan Değer	Veri özelliği adı	Açıklama
zemin	boolean veya 'statik' dizesi Varsayılan: doğru	veri zemini	Kullanıcı modalin dışını tıkladığında modun kapatılmasını istemiyorsanız, arka plan için statik belirtin.
tuş takımı	boolean Varsayılanı: true	veri klavyesi	Escape tuşuna basıldığında modal'ı kapatır; devre dışı bırakmak için false olarak ayarlayın.
göstermek	boolean Varsayılanı: true	veri gösterimi	Modal başlatıldığında gösterir.
uzak	yol Varsayılanı: yanlış	uzaktan veri	JQuery .load yöntemini kullanarak içeriği modal gövdeye enjekte edin. Geçerli bir URL'ye sahip bir href eklenirse, bu içeriği yükleyecektir. Bunun bir örneği aşağıda gösterilmiştir - `<a data-toggle = "modal" href = "remote.html" data-target = "#modal">Click me</a>`

Yöntemler

Modal () ile kullanılabilecek bazı yararlı yöntemler.

Yöntem	Açıklama	Misal
Options - .modal (seçenekler)	İçeriğinizi modal olarak etkinleştirir. İsteğe bağlı seçenekler nesnesini kabul eder.	`$('#identifier').modal({ keyboard: false })`
Toggle - .modal ('geçiş')	Bir modeli manuel olarak değiştirir.	`$('#identifier').modal('toggle')`
Show - .modal ('gösteri')	Bir modeli manuel olarak açar.	`$('#identifier').modal('show')`
Hide - .modal ('gizle')	Bir modeli manuel olarak gizler.	`$('#identifier').modal('hide')`

Misal

Aşağıdaki örnek, yöntemlerin kullanımını gösterir -

<h2>Example of using methods of Modal Plugin</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
               ×
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Press ESC button to exit.
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
   
</div><!-- /.modal -->

<script>
   $(function () { $('#myModal').modal({
      keyboard: true
   })});
</script>

Sadece Esc düğmesine tıklayın ve kalıcı pencere çıkar.

Etkinlikler

Aşağıdaki tablo modal ile çalışılacak olayları listeler. Bu olaylar, işleve bağlanmak için kullanılabilir.

Etkinlik	Açıklama	Misal
show.bs.modal	Gösteri yöntemi çağrıldıktan sonra ateşlendi.	`$('#identifier').on('show.bs.modal', function () { // do something… })`
gösterilen.bs.modal	Modal kullanıcı tarafından görünür hale getirildiğinde tetiklenir (CSS geçişlerinin tamamlanmasını bekler).	`$('#identifier').on('shown.bs.modal', function () { // do something… })`
hide.bs.modal	Hide örneği yöntemi çağrıldığında tetiklenir.	`$('#identifier').on('hide.bs.modal', function () { // do something… })`
hidden.bs.modal	Modal kullanıcıdan gizlenmeyi tamamladığında tetiklenir.	`$('#identifier').on('hidden.bs.modal', function () { // do something… })`

Misal

Aşağıdaki örnek olayların kullanımını gösterir -

<h2>Example of using events of Modal Plugin</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
               ×
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Click on close button to check Event functionality.
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
   
</div><!-- /.modal -->

<script>
   $(function () { $('#myModal').modal('hide')})});
</script>

<script>
   $(function () { $('#myModal').on('hide.bs.modal', function () {
      alert('Hey, I heard you like modals...');})
   });
</script>

Yukarıdaki ekranda görüldüğü gibi Kapat düğmesine tıklarsanız, yani olayı gizlerseniz bir uyarı mesajı görüntülenir.