Bootstrap Modal Kullanımı

nhtctn nhtctn

Başlangıçta gösterilmeyen bir içeriği bir butona tıklanma durumunda bir açılır bir pencerede göstermeyi sağlayan bir yapıdır.

** bir butona data-toggle=”modal” özelliğini veriyoruz.

** data-target ile ilişkilendirilecek içeriğinin id bilgisini veriyoruz.

** Modal kutusunun içeriğini istediğiniz gibi düzenleyebilirsiniz.

** Modal kutusunu aynen bir card gibi hazırlayabilirsiniz. Modal-header, model-body ve model-footer bölümlerinde oluşur ve istediğiniz bölümü kullanabilirsiniz.

**data-dismiss özelliğine sahip bir buton ya da icon ile açılmış modal’i kapatabilirsiniz.

<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

** .fade sınıfı ile kutu açılıp kapanırken bir transition efektine sahi olur.

** modal kutusunun boyutlarını .modal-sm ve .modal-lg ile değiştirebilirsiniz.

** modal kutusunu dikeyde ortalamak için .modal-dialog-centered sınıfını kullanabilirsiniz.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Open modal </button>
  <!-- The Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header"> </div> <!-- Modal body -->
        <div class="modal-body"> </div> <!-- Modal footer -->
      </div>
    </div>
  </div>
  </div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open Modal
</button>

<div id="myModal" class="modal fade ">
    <div class="modal-dialog modal-sm modal-dialog-centered">

        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">modal1</h4>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body">
                Lorem ipsum dolor sit amet.
            </div>
            <div class="modal-footer">
                <button class="btn btn-danger" type="button" data-dismiss="modal">Close</button></div>


        </div>
    </div>
</div>

Aşağıdaki örneğimizde butona tıklamadan yani sayfa yüklendiğinde otomatik ekrana gelen modal örneğini görüyoruz.


<div id="myModal2" class="modal fade ">
  <div class="modal-dialog modal-sm modal-dialog-centered">

      <div class="modal-content">
          <div class="modal-header">
              <h4 class="modal-title">modal2</h4>
              <button type="button" class="close" data-dismiss="modal">×</button>
          </div>
          <div class="modal-body">
              Lorem ipsum dolor sit amet.
          </div>
          <div class="modal-footer">
              <button class="btn btn-danger" type="button" data-dismiss="modal">Close</button></div>


      </div>
  </div>
</div>
  <script>
    $(function(){
      $('#myModal2').modal('show');
    });
  </script>
 <button type="button" id="btnModal" class="btn btn-warning">
    Open Modal
</button>

<div id="myModal3" class="modal fade ">
    <div class="modal-dialog modal-sm modal-dialog-centered">

        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">modal 3</h4>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body">
                Lorem ipsum dolor sit amet.
            </div>
            <div class="modal-footer">
                <button class="btn btn-danger" type="button" data-dismiss="modal">Close</button></div>


        </div>
    </div>
</div>
<script>
    $(function() {

        $('#btnModal').click(function() {
            $('#myModal3').modal('show');
        });

        $('myModal3').on('hide.bs.modal', function(e) {
            console.log('hide');
        });
        $('myModal3').on('hidden.bs.modal', function(e) {
            console.log('hidden');
        });
        $('myModal3').on('show.bs.modal', function(e) {
            console.log('show');
        });
        $('myModal3').on('shown.bs.modal', function(e) {
            console.log('shown');
        });
    });

</script>

Yorum yazın

BENZER YAZILAR