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

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output

full-stack-img




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.