How to open a different modal that is inside of a list ?

Last Updated : 13 Sep, 2020

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= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
            integrity= 
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
        crossorigin="anonymous"> 
    <script src= 
"https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity= 
"sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
        crossorigin="anonymous"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" 
        integrity= 
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"> 
    </script> 
    <script src= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        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= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity= 
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
        crossorigin="anonymous"> 
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity= 
"sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
        crossorigin="anonymous"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity= 
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 
        crossorigin="anonymous"> 
    </script> 
    <script src= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        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

Suggest improvement

Bootstrap-5 Forms

JavaScript Number Prototype Property

Share your thoughts in the comments

How to open a different modal that is inside of a list ?

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?