Friday, April 26, 2024
HomejQueryBootstrap 5 Modal {No jQuery} with 6 Examples

Bootstrap 5 Modal {No jQuery} with 6 Examples


<!DOCTYPE html>

 

<html>

 

<head>

 

<hyperlink href=“https://cdn.jsdelivr.web/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css” rel=“stylesheet” integrity=“sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x” crossorigin=“nameless”>

 

<script src=“https://cdn.jsdelivr.web/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js” integrity=“sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT” crossorigin=“nameless”></script>

 

 

 

 

<script>

 

var myModal = new bootstrap.Modal(doc.getElementById(‘scrollingModal’), choices)

 

 

 

 

</script>

 

</head>

 

<physique>

 

<div class=“container”>

 

  <h3>Bootstrap 5 Modal Instance</h2>

 

 

 

 

<!– Set off Modal Element –>

 

<button kind=“button” class=“btn btn-danger” data-bs-toggle=“modal” data-bs-target=“#scrollingModal”>

 

  Launch demo modal

 

</button>

 

 

 

 

 

 

 

<!– Modal –>

 

<div class=“modal fade” id=“scrollingModal” tabindex=“-1” aria-labelledby=“basicModalLabel” aria-hidden=“true”>

 

  <div class=“modal-dialog modal-dialog-scrollable”>

 

    <div class=“modal-content”>

 

      <div class=“modal-header”>

 

        <h5 class=“modal-title” id=“basicModalLabel”>Heading of Scrollable Modal Right here</h5>

 

        <button kind=“button” class=“btn-close” data-bs-dismiss=“modal” aria-label=“Shut”></button>

 

      </div>

 

      <div class=“modal-body”>

 

        That is the physique of modal element the place content material is positioned.

 

        That is the physique of modal element the place content material is positioned.

 

        That is the physique of modal element the place content material is positioned.

 

        That is the physique of modal element the place content material is positioned.

 

        That is the physique of modal element the place content material is positioned.

 

        That is the physique of modal element the place content material is positioned.

 

        That is the physique of modal element the place content material is positioned.

 

        That is the physique of modal element the place content material is positioned.

 

        That is the physique of modal element the place content material is positioned.

 

        That is the physique of modal element the place content material is positioned.

 

        That is the physique of modal element the place content material is positioned.

 

        That is the physique of modal element the place content material is positioned.

 

        That is the physique of modal element the place content material is positioned.

 

        That is the physique of modal element the place content material is positioned.

 

        That is the physique of modal element the place content material is positioned.

 

        That is the physique of modal element the place content material is positioned.

 

        That is the physique of modal element the place content material is positioned.

 

        That is the physique of modal element the place content material is positioned.

 

        That is the physique of modal element the place content material is positioned.

 

        That is the physique of modal element the place content material is positioned.

 

        That is the physique of modal element the place content material is positioned.

 

        That is the physique of modal element the place content material is positioned.

 

        That is the physique of modal element the place content material is positioned.

 

        That is the physique of modal element the place content material is positioned.       

 

      </div>

 

      <div class=“modal-footer”>

 

        <button kind=“button” class=“btn btn-primary”>Sure</button>

 

        <button kind=“button” class=“btn btn-primary”>No</button>

 

        <button kind=“button” class=“btn btn-danger” data-bs-dismiss=“modal”>Exit</button>       

 

      </div>

 

    </div>

 

  </div>

 

</div>

 

 

 

 

</div>

 

</physique>

 

</html>

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments