如何创建Bootstrap模式弹出窗口？

How Do I Create Bootstrap Modal Popup?

我要创建弹出窗口。我正在上衣网站的房子上。在那，当我单击国家名称时，将显示文本弹出窗口。
请检查
http://www.houseofblouse.com/index

如果您使用的是Bootstrap，并且如此处所述：

首先创建一个触发模式

的按钮

1 2	<!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

然后创建模态：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<button type="button" class="close" data-dismiss="modal"></button>
<h4 class="modal-title">Modal Header</h4>

<p>Some text in the modal.</p>

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

您的代码->这就是您要查找的网站。.

第一个弹出窗口将显示给用户，然后单击"同意"按钮，将显示第二个弹出窗口。

相关讨论

请使用以下代码作为示例。来源(http://www.w3schools.com/bootstrap/bootstrap_modal.asp)

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

<!DOCTYPE html>
<html lang="en">
<head>
Bootstrap Example
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</head>
<body>

Modal Example

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>





<button type="button" class="close" data-dismiss="modal"></button>
<h4 class="modal-title">Modal Header</h4>

<p>Some text in the modal.</p>

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

</body>
</html>