list for a different modal

Remark : 각 리스트에 내용이 다른 모달 생성


<!DOCTYPE html>
<html>
  
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge;" />

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

<!DOCTYPE html>

<html>

<head>

integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"

crossorigin="anonymous">

crossorigin="anonymous">

</script>

crossorigin="anonymous">

</script>

crossorigin="anonymous">

</script>

</head>

<body>

<ul>

<li data-toggle="modal"

data-target="#exampleModal1"

data-whatever="item 1">

</li>

<li data-toggle="modal"

data-target="#exampleModal2"

data-whatever="item 2">

</li>

<li data-toggle="modal"

data-target="#exampleModal3"

data-whatever="item 3">

</li>

</ul>

<div class="modal fade" id="exampleModal1"

tabindex="-1" role="dialog"

aria-labelledby="exampleModalLabel"

aria-hidden="true">

<h5 class="modal-title"

id="exampleModalLabel">

Modal title

</h5>

<button type="button" class="close"

data-dismiss="modal" aria-label="Close">

</button>

</div>

<p>

Python is a high-level, general-purpose

and a very popular programming language..

</p>

</div>

<button type="button" class=

"btn btn-secondary" data-dismiss="modal">

</button>

</div>

<div class="modal fade" id="exampleModal2"

tabindex="-1" role="dialog"

aria-labelledby="exampleModalLabel"

aria-hidden="true">

<h5 class="modal-title"

id="exampleModalLabel">

Modal title</h5>

<button type="button" class="close"

data-dismiss="modal" aria-label="Close">

</button>

</div>

<p>

This specially designed Python

tutorial will help you learn

Python Programming Language.

</p>

</div>

<button type="button"

class="btn btn-secondary"

data-dismiss="modal">

</button>

</div>

<div class="modal fade" id="exampleModal3"

tabindex="-1" role="dialog"

aria-labelledby="exampleModalLabel"

aria-hidden="true">

<h5 class="modal-title"

id="exampleModalLabel">

Modal title

</h5>

<button type="button" class="close"

data-dismiss="modal"

aria-label="Close">

</button>

</div>

<p>

Learning applications, along with

all cutting edge technology in

Software Industry.

</p>

</div>

<button type="button"

class="btn btn-secondary"

data-dismiss="modal">

</button>

</div>

</body>

</html>

참조 : https://www.geeksforgeeks.org/how-to-open-a-different-modal-that-is-inside-of-a-list/