溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

bootstrap中如何使用彈窗

發(fā)布時(shí)間：2022-02-24 14:03:08 來源：億速云 閱讀：182 作者：iii 欄目：開發(fā)技術(shù)

今天小編給大家分享一下bootstrap中如何使用彈窗的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

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

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

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

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

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

<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 實(shí)例 - 模態(tài)框（Modal）插件</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<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>

<h3>創(chuàng)建模態(tài)框（Modal）</h3>
<!-- 按鈕觸發(fā)模態(tài)框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	開始演示模態(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>
				<h5 class="modal-title" id="myModalLabel">
					模態(tài)框（Modal）標(biāo)題
				</h5>
			</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>

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

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

以上就是“bootstrap中如何使用彈窗”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手