天天看點
傳回

boostrap 對話框 學習

概述：

效果：

boostrap 對話框 學習

代碼：

<div  class="modal in" style="display:block">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<button class="close">&times;</button>

<h4>使用者登入</h4>

</div>

<div class="modal-body">

<p>使用者名： <input type="text" placeholder="請輸入使用者名"></p>

<p>密碼： <input type="password" placeholder="請輸入密碼"></p>

</div> 

<div class="modal-footer">

<button class="btn btn-primary">登入</button>

</div>

</div>

</div>

</div>

<div class="modal-backdrop in"></div>

總結：

1、class="modal-backdrop in" 背景會顯示灰色，背景按鈕相關都不可用

2、class="modal in" 類似一塊布，在這塊布上畫對話框 style="display:block" 表示顯示這個塊布

3、class="modal-dialog" 表示将會畫對話框

4、class="close" 關閉樣式，&times 就是右上角的叉

5、class="modal-body" 表示對話框的主體，class="modal-footer" 表示對話框的頁腳

6、class="modal-content"表示對話框的内容，class="modal-header"表示對話框的頭部，這些都是語義化類樣式

現在觸發登入按鈕，彈出登入對話框

去掉 

1、<div class="modal-backdrop in"></div>

2、<div  class="modal in" style="display:block">

<div class="profile navbar-right">

<ul class="nav navbar-nav">

<li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" data-toggle="modal" data-target="#login">登入</a></li>

<li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >注冊</a></li>

</ul>

<p class="navbar-text">

歡迎您-<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="navbar-link">小貓咪</a>

</p>

</div>

<div  class="modal in fade" id="login">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<button class="close" data-dismiss="modal" >&times;</button>

<h4>使用者登入</h4>

</div>

<div class="modal-body">

<p>使用者名： <input type="text" placeholder="請輸入使用者名"></p>

<p>密碼： <input type="password" placeholder="請輸入密碼"></p>

</div> 

<div class="modal-footer">

<button class="btn btn-primary">登入</button>

</div>

</div>

</div>

</div>

總結：

1、要登入按鈕綁定 data-toggle ="modal" 表示切換的是modal， data-target ="#ID"表示你切換那個modal 的ID

2、class="modal in fade" 表示 modal in 表示展示，fade有個過渡效果

3、data-dismiss="modal" 表示遺棄目前modal，也就是關閉

tabindex 表示按下Tab鍵跳轉，如果tabindex=-1表示目前框開始跳轉，如果沒有就是直接從首頁開始

<div  class="modal in fade" id="login" tabindex="-1"> 表示從登陸對話框開始跳轉

去掉灰色背景

1、采用css樣式

<div  class="modal in fade" id="login" tabindex="-1" data-backdrop="false" > 

2、采用js

<script type="text/javascript">

$(function(){

$('#login').modal({

show:false,

backgroup:false

});

})

</script>

如何利用modal加載另個html的檔案，這裡需要web容器，例如tomcat将應用加載起來，注意底層用Ajax進行加載的

檔案夾結構：

boostrap 對話框 學習

總結：注意修改bootstrap.js  bootstrap.min.css 路徑問題

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8"/>
<meta name="viewport"
	content="width=device-width, user-scalable=no, initial-scale=1.0,
	maximum-scale=1.0, minimum-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet"
	href="/spittr/bootstrap-3.3.7-dist/css/bootstrap.min.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ></link>
<link rel="stylesheet" href="/spittr/css/style.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ></link>
<title>Insert title here</title>
</head>
<body>

	<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container">
			<div class="navbar-header">
				<button class="navbar-toggle" data-toggle="collapse" data-target="#responsive-navbar">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
			<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="navbar-brand"><strong>BootStrap</strong>.com</a>
			</div>
			<div class="collapse navbar-collapse" id="responsive-navbar">
				<ul class="nav navbar-nav">
					<li class="active"><a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >元件</a></li>
					<li><a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >CSS</a></li>
					<li><a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >JavaScript</a></li>
				</ul>
				<form action="" class="navbar-form navbar-left">
					<input type="text" placeholder="搜尋" class="form-control"/>
					<button type="submit">
						<span class="glyphicon glyphicon-search"></span>
					</button>
				</form>

				<a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="btn btn-primary btn-sm navbar-btn navbar-right hidden-xs">聯系我們</a>
				<div class="profile navbar-right">
					<ul class="nav navbar-nav">
						<li><a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  data-toggle="modal" data-target="#login">登入</a></li>
						<li><a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >注冊</a></li>
					</ul>
					<p class="navbar-text">
						歡迎您-<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="navbar-link">小貓咪</a>
					</p>
				</div>
			</div>
		</div>
	</nav>
	<div class="container" style="height: 1500px">
		<p class="alert alert-info">一個人的處境是苦是樂常是主觀的。
			有人安于某種生活，有人不能。是以能安于自已目前處境的不妨就如此生活下去，不能的隻好努力另找出路。你無法斷言哪裡才是成功的，也無法肯定當自已到達了某一點之後，會不會快樂。有些人永遠不會感到滿足，他的快樂隻建立在不斷地追求與争取的過程之中，是以，他的目标不斷地向遠處推移。這種人的快樂可能少，但成就可能大。
			苦樂全憑自已判斷，這和客觀環境并不一定有直接關系，正如一個不愛珠寶的女人，即使置身在極其重視虛榮的環境，也無傷她的自尊。
			擁有萬卷書的窮書生，并不想去和百萬富翁交換鑽石或股票。滿足于田園生活的人也并不豔羨任何學者的榮譽頭銜，或高官厚祿。
			你的愛好就是你的方向，你的興趣就是你的資本，你的性情就是你的命運。各 人有各人理想的樂園，有自已所樂于安享的花花世界。</p>
	</div>
	<div  class="modal in fade" id="login" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				
			</div>
		</div>
	</div>
	
	<script type="text/javascript" src="/spittr/jquery/jquery.js"></script>
	<script type="text/javascript"
		src="/spittr/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(function(){
			
			$('#login').modal({
				show:false,
				backgroup:false,
				remote:'login.html'
			});
		})
	</script>
</body>
</html>

login.html

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width, user-scalable=no, initial-scale=1.0,
	maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet"
	href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" target="_blank" rel="external nofollow" >
<link rel="stylesheet" href="../css/style.css" target="_blank" rel="external nofollow" >
<title>Insert title here</title>
</head>
<body>

	<div class="modal-header">
		<button class="close" data-dismiss="modal">×</button>
		<h4>使用者登入</h4>
	</div>
	<div class="modal-body">
		<div class="form-group">
			<label for="username">使用者名</label>
			<input type="text" class="form-control" id="username" placeholder="請輸入使用者名">
		</div>
		<div class="form-group">
			<label for="password">密碼</label>
			<input type="password" class="form-control" id="password" placeholder="請輸入密碼">
		</div>
	</div>
	<div class="modal-footer">
		<button class="btn btn-primary">登入</button>
	</div>



</body>
</html>

css檔案：

body{
	padding-top:70px;
}
/* 對輸入框進行設定背景色、去邊框，字型顔色 */
.navbar-inverse input[type="text"] {  
	background: #313131;
	border:none;
	color:#999;
}

/*設定 表單以 導航欄作為參照物*/
.navbar-inverse .navbar-form {
	position: relative;
}

/*設定 按鈕位置在 表單内的絕對位置*/
.navbar-inverse button[type="submit"] {
	position: absolute;
	top:30%;
	right:20px;
	background: none;
	border: none;
	
}
@media(min-width: 768px){
	.navbar-inverse button[type="submit"]{
		top:15%;
	}
	
}
/*設定圖示的顔色*/
.navbar-inverse .glyphicon {
	color : #999;
}

.profile {
	margin-right:25px;
}

方式一：

用js實作

<script type="text/javascript">

$(function(){

$('#login').modal({

show:false,

backgroup:false,

remote:'login.html'

});

})

</script>

方式二：

登入a 标簽 設定href="login.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 需要注意就是要注釋 方式一的js代碼 否則沒有效果

<li><a href="login.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" data-toggle="modal" data-target="#login">登入</a></li>

方式三：

<div  class="modal in fade" id="login" tabindex="-1" data-remote="login.html" >

調試小技巧：

boostrap 對話框 學習

對話框的事件監聽：

$(function() {

$('#login').on('show.bs.modal', function() {

console.log('顯示對話框');

});

$('#login').on('shown.bs.modal', function() {

console.log('對話框已經顯示了');

});

$('#login').on('hide.bs.modal', function() {

console.log('隐藏對話框');

});

$('#login').on('hidden.bs.modal', function() {

console.log('對話框已經隐藏了');

});

$('#login').on('loaded.bs.modal', function() {

console.log('已經加載對話框');

});

})

對話框.on('對應狀态'，觸發的匿名函數)

效果：

當打開對話框的時候

boostrap 對話框 學習

關閉對話框的時候

boostrap 對話框 學習

最終html

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8" />
<meta name="viewport"
	content="width=device-width, user-scalable=no, initial-scale=1.0,
	maximum-scale=1.0, minimum-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet"
	href="/spittr/bootstrap-3.3.7-dist/css/bootstrap.min.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ></link>
<link rel="stylesheet" href="/spittr/css/style.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" ></link>
<title>Insert title here</title>
</head>
<body>

	<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container">
			<div class="navbar-header">
				<button class="navbar-toggle" data-toggle="collapse"
					data-target="#responsive-navbar">
					<span class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="navbar-brand"><strong>BootStrap</strong>.com</a>
			</div>
			<div class="collapse navbar-collapse" id="responsive-navbar">
				<ul class="nav navbar-nav">
					<li class="active"><a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >元件</a></li>
					<li><a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >CSS</a></li>
					<li><a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >JavaScript</a></li>
				</ul>
				<form action="" class="navbar-form navbar-left">
					<input type="text" placeholder="搜尋" class="form-control" />
					<button type="submit">
						<span class="glyphicon glyphicon-search"></span>
					</button>
				</form>

				<a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" 
					class="btn btn-primary btn-sm navbar-btn navbar-right hidden-xs">聯系我們</a>
				<div class="profile navbar-right">
					<ul class="nav navbar-nav">
						<li><a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  data-toggle="modal" data-target="#login">登入</a></li>
						<li><a href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >注冊</a></li>
					</ul>
					<p class="navbar-text">
						歡迎您-<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="navbar-link">小貓咪</a>
					</p>
				</div>
			</div>
		</div>
	</nav>
	<div class="container" style="height: 1500px">
		<p class="alert alert-info">一個人的處境是苦是樂常是主觀的。
			有人安于某種生活，有人不能。是以能安于自已目前處境的不妨就如此生活下去，不能的隻好努力另找出路。你無法斷言哪裡才是成功的，也無法肯定當自已到達了某一點之後，會不會快樂。有些人永遠不會感到滿足，他的快樂隻建立在不斷地追求與争取的過程之中，是以，他的目标不斷地向遠處推移。這種人的快樂可能少，但成就可能大。
			苦樂全憑自已判斷，這和客觀環境并不一定有直接關系，正如一個不愛珠寶的女人，即使置身在極其重視虛榮的環境，也無傷她的自尊。
			擁有萬卷書的窮書生，并不想去和百萬富翁交換鑽石或股票。滿足于田園生活的人也并不豔羨任何學者的榮譽頭銜，或高官厚祿。
			你的愛好就是你的方向，你的興趣就是你的資本，你的性情就是你的命運。各 人有各人理想的樂園，有自已所樂于安享的花花世界。</p>
	</div>
	<div class="modal in fade" id="login" tabindex="-1"
		data-remote="login.html">
		<div class="modal-dialog">
			<div class="modal-content"></div>
		</div>
	</div>

	<script type="text/javascript" src="/spittr/jquery/jquery.js"></script>
	<script type="text/javascript"
		src="/spittr/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$('#login').on('show.bs.modal', function() {

				console.log('顯示對話框');
			});
			$('#login').on('shown.bs.modal', function() {

				console.log('對話框已經顯示了');
			});
			$('#login').on('hide.bs.modal', function() {

				console.log('隐藏對話框');
			});
			$('#login').on('hidden.bs.modal', function() {

				console.log('對話框已經隐藏了');
			});
			$('#login').on('loaded.bs.modal', function() {
				
				console.log('已經加載對話框');
			});
		})
	</script>
</body>
</html>
Bootstrap實戰 對話框 bootstrap 事件
上一篇: Bootstrap中的栅格系統
下一篇: EasyUI-datagrid動态添加列（或者表頭）

繼續閱讀