Bootstrap modal się nie wyswietla po kliknięciu przycisku

pytanie zadane 3 kwietnia 2021 w HTML i CSS przez dawid2002 Mądrala (5,190 p.)
zamknięte 5 kwietnia 2021 przez dawid2002

Witam! Napisałem sobie przykładową stronę (w zasadzie kod skopiowałem ze strony bootstrapa) i nie chce mi działać. Chodzi o to, że gdy klikam w przycisk, modal nie chce się wyświetlić. Należy dodać jquery czy coś do kodu? korzystam z bootstrapa w wersji 5.

Kod:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>
    <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
  </button>
  
    <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>

Z góry dziękuje za pomoc!

komentarz zamknięcia: Sam sobie odpowiedziałem na to pytanie https://forum.pasja-informatyki.pl/535825/bootstrap-modal-sie-nie-wyswietla-po-kliknieciu-przycisku?show=536038#a536038

komentarz 3 kwietnia 2021 przez Wiciorny Ekspert (269,710 p.)

a dodałeś trigger w postaci funkcji która pokazuje CI okno modale np javascirptowa?

2 odpowiedzi

odpowiedź 3 kwietnia 2021 przez Wiciorny Ekspert (269,710 p.)

napisałem na szybko funkcje jQuery która zadziała

$('.openmodal').click(function(){
console.log("Test")
    $('.modal').modal('show');
})

Dodałem klase do buttona zeby zlokalizowac element

  <button type="button" class="openmodal btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
  </button>

Teraz działa
Całość

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>
    <!-- Button trigger modal -->
  <button type="button" class="openmodal btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
  </button>
   
    <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>

$('.openmodal').click(function(){
console.log("Test")
	$('.modal').modal('show');
})

komentarz 3 kwietnia 2021 przez Wiciorny Ekspert (269,710 p.)

oczywiście można lepiej, można po innym elemencie etc. ja to na szybko pisałem też można inaczej funkcje napisać, ale musisz triggera doac

odpowiedź 5 kwietnia 2021 przez dawid2002 Mądrala (5,190 p.)

Już wiem co jest nie tak - należy zamienić wszystkie atrybuty html, które zaczynają się na "data-" na "data-bs-". Przykładowo data-toggle na data-bs-toggle. Odkryłem to przy "eksperymentowaniu" przy tym kodzie (link tutaj: https://github.com/twbs/bootstrap/discussions/32347). Ja korzystam z bootstrapa 5 beta 2, więc u mnie musi być prefiks "data-bs" zaś w takich wersjach jak bootstrap 5 alpha 3 musi być po prostu "data". Co ciekawe można też nie używać tych atrybutów i zastosować javascript (przykład takiego kodu jest pod linkiem, który dałem wcześniej w tej odpowiedzi).

komentarz 5 kwietnia 2021 przez Wiciorny Ekspert (269,710 p.)

to jest całkiem co innego i nie trzeba. albo polecam poczytać dokumentacje boostrap czym jest "to owe -bs-" :)

komentarz 5 kwietnia 2021 przez dawid2002 Mądrala (5,190 p.)

Ja wolę te rozwiązanie, działa i jest proste. Po co mam pisać specjalnie kod js, skoro mogę wykorzystać to co oferuje bootstrap, po co mam "wynaleźć koło na nowo"? Chyba o to chodzi w programowaniu, aby pisać jak najmniej.

Poza tym twój kod z twojej tamtej odpowiedzi nie działa. Podejrzewam, że pisałeś to pod bootstrapa 4 lub inną wersje niż 5. Teraz nie ma czegoś takiego jak " $('.modal').modal('show')" (z resztą zobacz sobie sam co teraz jest w 5: https://getbootstrap.com/docs/5.0/components/modal/#methods)