App下載

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

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

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

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

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

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

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

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

<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 實例 - 模態(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">
	開始演示模態(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）標題
				</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>

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

案例實現(xiàn)截圖

我們在使用這個組件的時候需要有某種觸發(fā)器來進行實現(xiàn)，這邊的觸發(fā)器就是我們的按鈕，在代碼中我們會發(fā)現(xiàn)在 ?<button> ?標簽中

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

總結(jié)：

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


Bootstrap

0 人點贊