Show modal on click anchor tag

You can show modal on click anchor tag using bootstrap in HTML page.

Answers 1
  • Show bootstrap modal on click anchor tag in HTML

    Anchor tag

    <a href="javascript:void(0)" data-toggle="modal" data-target="#myModal"> <i class="fa fa-plus" aria-hidden="true"></i> </a>
    

    Bootstrap modal

    <div class="modal" id="myModal">
       <div class="modal-dialog ">
           <div class="modal-content">
               <div class="modal-header">
                  <h4 class="modal-title">Modal title</h4>
                   <button type="button" class="close" data-dismiss="modal">&amp;times;</button>
               </div>
              <div class="modal-body">
            <p>Modal body text goes here.</p>
              </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>
    
    0

    You can display bootstrap modal using data attribute (data-toggle, data-target) in anchor tag. You have to use bootstrap CDN in your HTML page in which you want to use the bootstrap modal.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  • Back to code snippet queries related bootstrap