不要把Modal按鈕和被觸發的區塊放在同一個區塊中
我發現觸發Modal的按鈕 和 被觸發的區塊不能放在同一個區塊中，
不然，你按下這個觸發鈕的時候，沒辦法，觸發相對應的Modal區塊。
故我把觸發區塊，放在整個專案的footer的後面的地方就沒問題了。
ex:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
| <!--這一份html檔案，是整體layout的公版，保存了header和footer的部分版型-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="shortcut icon" href="/img/favicon.png">
<meta name='description' content='雕塑你我的美妙身材' />
<link href="/img/favicon.png" rel="apple-touch-icon" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<link rel="stylesheet" href="/css/css/all.css">
<link rel="stylesheet" href="/css/all.min.css">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<script src="/javascript/jquery-3.5.1.min.js"></script>
</head>
<body>
<div class="container">
<div class="header">
<nav class="navbar navbar-expand-md navbar-light bg-yl">
<button class="navbar-toggler rwd-hamburger-btn" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<a href="#"><i class="fas fa-bars"></i></a>
</button>
<a class="navbar-brand" href="landing_page.html">
<img src="/img/protectionshield.svg" width="50" height="50" class="d-inline-block" alt="">
<span class="d-none d-md-inline-block">Berserker Fittness</span>
</a>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="landing_page.html">首頁</a>
</li>
<li class="nav-item ml-4">
<a class="nav-link" href="lecture_page.html">課程</a>
</li>
<li class="nav-item ml-4">
<a class="nav-link" href="register_page.html">登入</a>
</li>
<li class="nav-item ml-4">
<div class="dropdown">
<button class="btn btn-secondary cart_btn" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
<i class="fas fa-shopping-cart text-dark"></i>
</button>
<div class="dropdown-menu product_list_dropdown p-0" aria-labelledby="dropdownMenuButton">
<div class="card rounded-0">
<h5 class="card-header">已選購商品</h5>
<div class="card-body p-0">
<table class="table productlist_table m-0">
<tbody>
<tr>
<th class="border-top-0" scope="row">
<a data-toggle="modal" data-target="#removeModal" data-whatever="金牌西裝" href="#">
<i class="fas fa-trash-alt"></i>
</a>
</th>
<td class="border-top-0 w-50">
<img src="/img/arm-train.jpg" class="bg-cover productlist_table_img" alt="">
<p class="m-0">手部訓練</p>
</td>
<td class="border-top-0" >x2</td>
<td class="border-top-0 w-25">NT$900</td>
</tr>
<tr>
<th class="border-top-0" scope="row">
<a href="#">
<i class="fas fa-trash-alt"></i>
</a>
</th>
<td class="border-top-0">
<img src="/img/back-train.jpg" class="bg-cover productlist_table_img" alt="">
<p class="m-0">背部訓練</p>
</td>
<td class="border-top-0">x3</td>
<td class="border-top-0">NT$1350</td>
</tr>
</tbody>
</table>
</div>
<div class="cart-footer">
<a href="cart_page1.html" class="btn btn-yl btn-lg w-100 rounded-0 font-weight-bold">結帳去</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-secondary cart_btn rwd-cart-btn" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
<i class="fas fa-shopping-cart text-dark"></i>
</button>
<div class="dropdown-menu product_list_dropdown p-0" aria-labelledby="dropdownMenuButton">
<div class="card">
<h5 class="card-header">已選購商品</h5>
<div class="card-body p-0">
<table class="table productlist_table">
<tbody>
<tr>
<th class="border-top-0" scope="row">
<a href="#">
<i class="fas fa-trash-alt"></i>
</a>
</th>
<td class="border-top-0 w-50">
<img src="/img/arm-train.jpg" class="bg-cover productlist_table_img" alt="">
<p class="m-0">手部訓練</p>
</td>
<td class="border-top-0" >x2</td>
<td class="border-top-0 w-25">NT$900</td>
</tr>
<tr>
<th class="border-top-0" scope="row">
<a href="#">
<i class="fas fa-trash-alt"></i>
</a>
</th>
<td class="border-top-0">
<img src="/img/back-train.jpg" class="bg-cover productlist_table_img" alt="">
<p class="m-0">背部訓練</p>
</td>
<td class="border-top-0">x3</td>
<td class="border-top-0">NT$1350</td>
</tr>
</tbody>
</table>
</div>
<div class="cart-footer">
<a href="cart_page1.html" class="btn btn-yl btn-lg w-100 rounded-0 font-weight-bold">結帳去</a>
</div>
</div>
</div>
</div>
</nav>
<div class="banner" data-aos="fade-right">
<h2 class="banner-solgan">
想長肉--
<br>
<span>就是現在</span>
</h2>
</div>
</div>
<ul class="hide-nav list-unstyled collapse" id="navbarToggleExternalContent">
<li class="p-2">
<a href="landing_page.html">首頁</a>
</li>
<li class="p-2">
<a href="lecture_page.html" >課程</a>
</li>
<li class="p-2">
<a href="register_page.html">登入</a>
</li>
</ul>
</div>
<!--客製化頁面開始-->
<!--客製化頁面結束-->
<footer>
</footer>
<!--Modal-->
<div class="modal fade" data-backdrop="static" id="removeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-danger text-white">
<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">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">否</button>
<button type="button" class="btn btn-outline-danger px-5">是</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
|
你可以看到以上的案例中，在.product_list_dropdown中的垃圾桶按鈕，他會觸發id為removeModal的區塊，
那你可以看到，我把removeModal的區塊放在<footer></footer>的後面，就可以正常觸發。
但是，如果我把removeModal的區塊放在放在跟.product_list_dropdown中的垃圾桶按鈕同一個區塊中，
也就是同一個<th></th>裡面的話，就無法觸發這個removeModal區塊了。