• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Bootstrap modal się nie wyswietla po kliknięciu przycisku

VPS Starter Arubacloud
0 głosów
534 wizyt
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,120 p.)
a dodałeś trigger w postaci funkcji która pokazuje CI okno modale np javascirptowa?

2 odpowiedzi

0 głosów
odpowiedź 3 kwietnia 2021 przez Wiciorny Ekspert (269,120 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,120 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
0 głosów
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,120 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)

Podobne pytania

0 głosów
0 odpowiedzi 681 wizyt
+1 głos
1 odpowiedź 4,792 wizyt
0 głosów
2 odpowiedzi 375 wizyt

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...