Bootstrap Modal Çalışmıyorsa Bu Kodu Dene

Bootstrap Modal Kullanım Örneği

Bootstrap'ın resmi sitesinde modal kısmından kod örnekleri aldıysanız ve çalıştıramadıysanız aşağıdaki vereceğim kodu uygulayabilirsiniz.  Bu kodu boş bir html sayfası oluşturup deneyin eğer modal çalışırsa asıl çalışma yaptığınız kodda uygulayabilirsiniz.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Modal Örneği</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" >
</head>
<body>

<!-- Buton Modalı Tetikler -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch Demo Modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal Başlık</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Modal içeriği buraya gelecek.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Kapat</button>
        <button type="button" class="btn btn-primary">Değişiklikleri Kaydet</button>
      </div>
    </div>
  </div>
</div>

<!-- Bootstrap JS ve Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Eğer bootstrap resmi sitesinden aldığınız kod çalışmadıysa yukardaki kod işinize yarayacaktır. 

Bu Yazımızada Göz At:

Bootstrap İle Div Ortalama Nasıl Yapılır?



E-Bültenime Abone Ol



Anahtar Kelimeler: Bootstrap,Modal
Yazan: Emre TENİK

Bu yazı: 97 kez okundu



Yorum Yap




Yorumlar: