App下載

在bootstrap中怎么使用彈窗？彈窗使用的方法！

猿友 2021-07-13 15:23:38 瀏覽數(shù) (6056)
反饋

在前端 Bootstrap 框架是如今還是比較受歡迎的框架，對(duì)于這個(gè)框架我們今天就來(lái)說(shuō)說(shuō)有關(guān)于“在bootstrap中怎么使用彈窗？”這個(gè)問(wèn)題，下面是小編收集和整理的相關(guān)內(nèi)容，當(dāng)然也希望這些內(nèi)容可以對(duì)大家有所幫助。

對(duì)于Bootstrap 框架來(lái)說(shuō)：它通常的目的是用來(lái)顯示單獨(dú)的內(nèi)容，對(duì)于用的法的話有下面這幾種：

1、通過(guò) data 屬性：在控制器元素上設(shè)置屬性 ?data-toggle="modal"?，同時(shí)設(shè)置 ?data-target="#udebtifier"? 或 ?href=“#identifier”?從而來(lái)指定切換特定的模態(tài)框。

2、通過(guò) JavaScript ：在使用這個(gè)方法的時(shí)候 我們可以通過(guò)簡(jiǎn)單的一串代碼來(lái)調(diào)用帶有 id="identifier" 的模態(tài)框架，代碼如下所示：

$('#identifier').modal(options)

我們來(lái)看看關(guān)于這個(gè)問(wèn)題的案例，代碼如下所示：

<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 實(shí)例 - 模態(tài)框（Modal）插件</title>
	<link rel="stylesheet" >
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<h2>創(chuàng)建模態(tài)框（Modal）</h2>
<!-- 按鈕觸發(fā)模態(tài)框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	開(kāi)始演示模態(tài)框
</button>
<!-- 模態(tài)框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					模態(tài)框（Modal）標(biāo)題
				</h4>
			</div>
			<div class="modal-body">
				在這里添加一些文本
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉
				</button>
				<button type="button" class="btn btn-primary">
					提交更改
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
</body>
</html>

下面是我們實(shí)現(xiàn)的效果截圖如下所示：

案例實(shí)現(xiàn)截圖

我們?cè)谑褂眠@個(gè)組件的時(shí)候需要有某種觸發(fā)器來(lái)進(jìn)行實(shí)現(xiàn)，這邊的觸發(fā)器就是我們的按鈕，在代碼中我們會(huì)發(fā)現(xiàn)在 ?<button> ?標(biāo)簽中

data-target="#myModal" 是我們頁(yè)面中加載組件的目標(biāo)。

總結(jié)：

以上就是有關(guān)于“在bootstrap中怎么使用彈窗？”這個(gè)問(wèn)題的相關(guān)內(nèi)容，當(dāng)然如果你覺(jué)得你有比小編更好的方式和方法也可以和大家一起分享你的想法，對(duì)于更多有關(guān)于 Bootstrap 這個(gè)問(wèn)題的相關(guān)內(nèi)容我們都可以在 W3Cschool 中進(jìn)行學(xué)習(xí)和了解。


Bootstrap

0 人點(diǎn)贊