Cascading Style Sheets is a style sheet language used along with HTML and JavaScript for building a web application. CSS frameworks give a library allowing for easier, standardized web designing. One such CSS framework is Bootstrap 4. Bootstrap 4 is the most commonly used CSS framework due to its simplicity and the inbuilt library that offers a vast range of components and utilities required to design an interactive user interface.
List and modals are among the wide variety of predefined components in Bootstrap 4. Modals are based on the combination of HTML, CSS, and JavaScript. Modals are positioned over the parent element that triggered it in the document and can be removed by clicking the close options present within the modal. Also, clicking on the modal backdrop automatically closes the modal. Bootstrap 4 supports only one modal at a time. This article focuses on opening a different modal that is inside a list. The below examples demonstrates the opening of a modal from a list item.
First Approach: The first approach deals with modals containing completely different content. In this case, the modals have to be coded individually.
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= integrity= "sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src= "sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"> </script> <script src= integrity= "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"> </script> <script src= integrity= "sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"> </script> </head> <body> <!-- Button trigger modal --> <ul> <li data-toggle="modal" data-target="#exampleModal1" data-whatever="item 1"> <a href="#">Item 1</a> </li> <li data-toggle="modal" data-target="#exampleModal2" data-whatever="item 2"> <a href="#">Item 2</a> </li> <li data-toggle="modal" data-target="#exampleModal3" data-whatever="item 3"> <a href="#">Item 3</a> </li> </ul> <!-- Modal --> <div class="modal fade" id="exampleModal1" 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">×</span> </button> </div> <div class="modal-body"> <p> Python is a high-level, general-purpose and a very popular programming language.. </p> </div> <div class="modal-footer"> <button type="button" class= "btn btn-secondary" data-dismiss="modal"> Close </button> </div> </div> </div> </div> <div class="modal fade" id="exampleModal2" 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">×</span> </button> </div> <div class="modal-body"> <p> This specially designed Python tutorial will help you learn Python Programming Language. </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal"> Close </button> </div> </div> </div> </div> <div class="modal fade" id="exampleModal3" 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">×</span> </button> </div> <div class="modal-body"> <p> Learning applications, along with all cutting edge technology in Software Industry. </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal"> Close </button> </div> </div> </div> </div> </body> </html> |
Output
-
The following output is displayed on click of “item1”
-
The following output is displayed on click of “item2”
-
The following output is displayed on click of “item3”
Second Approach: The second approach deals with modals that have almost similar content with very slight differences. A JavaScript function is written for changing text depending on the requirement. The show.bs.modal event fires immediately when the show instance method of the list item is called. The clicked element is available as the relatedTarget property of the event. The target element is stored in the ‘li’ variable. Next the data-whatever value of the target element is stored in the recipient variable. The current modal event is stored in the modal variable. This modal variable invokes the find() method to find the modal “title” and modal “body” and replace it with the required text.
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= integrity= "sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> integrity= "sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"> </script> <script src= integrity= "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"> </script> <script src= integrity= "sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"> </script> </head> <body> <!-- Button trigger modal --> <ul> <li data-toggle="modal" data-target="#exampleModal" data-whatever="item 1"> <a href="#">Item 1</a> </li> <li data-toggle="modal" data-target="#exampleModal" data-whatever="item 2"> <a href="#">Item 2</a> </li> <li data-toggle="modal" data-target="#exampleModal" data-whatever="item 3"> <a href="#">Item 3</a> </li> </ul> <!-- 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">×</span> </button> </div> <div class="modal-body"> <p> hi</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal"> Close </button> </div> </div> </div> </div> <script> $('#exampleModal').on('show.bs.modal', function (event) { // Button that triggered the modal var li = $(event.relatedTarget) // Extract info from data attributes var recipient = li.data('whatever') // Updating the modal content using // jQuery query selectors var modal = $(this) modal.find('.modal-title') .text('New message to ' + recipient) modal.find('.modal-body p') .text('Welcome to ' + recipient) }) </script> </body> </html> |
Output
