Bootstrap günümüzde sıklıkla kullanılan CSS ve JS kütüphanesidir. Modal kullanımı da oldukça fazladır ancak sıklıkla kullanıldığı zamanlarda kod karmaşıklığına yol açabiliyor. Bu konu da modalları dinamik olarak çekmeyi öğreneceğiz, bu sayede tüm modalları tek klasörde toplayarak rahatlıkla erişebileceksiniz.

Öncelikle modalımızı çağırmak için buton ekleyelim, modal bağlantımız için data-modal-src attribute'unu oluşturduk değer olarak uzak modalımızın bağlantısını atayacağız.
<button data-modal-src="modals/modal_1.html" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal">
  Demo modal
</button>
Şimdi de verileri içine çekeceğimiz blank bir modal hazırlayalım, bunu footer'ınıza ekleyebilirsiniz. Veriler modal-content classına sahip divin içerisine çekilecek, elementi Javascript kodumuzda seçmek için id atayabilirsiniz isterseniz direkt .modal-content classı ile seçin ben bu şekilde yapacağım.
<div class="modal fade" id="modal">
  <div class="modal-dialog">
    <div class="modal-content">
    </div>
  </div>
</div>
Örnek için Modals adında klasör oluşturup içerisine modal_1.html ve modal_2.html adlı iki dosya ekleyelim, iki dosyanın içini dolduralım.
    <div class="modal-header">
        <h5 class="my-0"><i class="bi bi-exclamation-triangle"></i>Örnek Modal (modal_1.html)</h5>
        <button type="button" class="btn-close bg-light" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">
      <p>Örnek modal</p>
    </div>
    <div class="modal-footer">
        <div class="d-flex gap-2">
            <a class="btn btn-primary" role="button" data-bs-dismiss="modal" aria-label="Close">
                <i class="bi bi-x-lg"></i>Kapat
            </a>
        </div>
    </div>
Son olarak Javascript kodumuzu yazalım
//data-modal-src attribute'una sahip olan button elementlerine click yapıldığında çalışacak olan fonksiyonumuz
$("button[data-modal-src]").on('click', function(){
  let url = $(this).attr("data-modal-src") ;
  $.get(url, function (html) {
    $(".modal-content").html(html);
  });
});
Örnekte ki gibi input'a girilen bağlantıya göre çekmek için hazırladığım basit yapı:
$("button[data-modal-src]").on('click', function(){
  var attr_val = $(this).attr("data-modal-src");
  var url;
    if($("input[name=with_input]").val().length > 0){
    url = $("input[name=with_input]").val();
    }else{
      url = attr_val;
    }
$.get(url, function (html) {
    $(".modal-content").html(html);
});
});


Sonuç


Örneğimiz erişim kısıtlamasından dolayı Codepen'de doğru şekilde çalışmayacaktır, alternatif olarak Plunker'a da ekledim.
https://plnkr.co/plunk/qvDioqQl0PSPQ64L

Diğer konularıma da göz atabilirsiniz!
İşinizi Kolaylaştıracak CSS Özellikleri
https://www.r10.net/hazir-kod-bankas...ellikleri.html
Bootstrap 5 Otomatik Açılan (Hoverable) Dropdown Menü
https://www.r10.net/ucretsiz-paylasi...down-menu.html