boostrap 对话框学习

最新推荐文章于 2023-05-02 21:03:24 发布

往前的

最新推荐文章于 2023-05-02 21:03:24 发布

阅读量652

点赞数

分类专栏： Bootstrap实战文章标签：对话框 bootstrap 事件

本文链接：https://blog.csdn.net/m0_37355951/article/details/73835473

版权

Bootstrap实战专栏收录该内容

17 篇文章 0 订阅

订阅专栏

概述：

效果：

代码：

总结：
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="modal in fade" id="login">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" >×</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

如何利用modal加载另个html的文件，这里需要web容器，例如tomcat将应用加载起来，注意底层用Ajax进行加载的

文件夹结构：

总结：注意修改bootstrap.js bootstrap.min.css 路径问题

<!DOCTYPE html>
<html lang="zh-hans">
<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"></link>
<link rel="stylesheet" href="/spittr/css/style.css"></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="#" 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="">组件</a></li>
					<li><a href="">CSS</a></li>
					<li><a href="">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="" 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="" data-toggle="modal" data-target="#login">登录</a></li>
						<li><a href="">注册</a></li>
					</ul>
					<p class="navbar-text">
						欢迎您-<a href="#" 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>

<!DOCTYPE html>
<html lang="zh-hans">
<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">
<link rel="stylesheet" href="../css/style.css">
<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实现

方式二：

登录a 标签设置href="login.html" 需要注意就是要注释方式一的js代码否则没有效果

方式三：

调试小技巧：

对话框的事件监听：

$(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('对应状态'，触发的匿名函数)

效果：

当打开对话框的时候

关闭对话框的时候

最终html

<!DOCTYPE html>
<html lang="zh-hans">
<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"></link>
<link rel="stylesheet" href="/spittr/css/style.css"></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="#" 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="">组件</a></li>
					<li><a href="">CSS</a></li>
					<li><a href="">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=""
					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="" data-toggle="modal" data-target="#login">登录</a></li>
						<li><a href="">注册</a></li>
					</ul>
					<p class="navbar-text">
						欢迎您-<a href="#" 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>

往前的

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
boostrap 对话框学习

概述：效果：代码：×用户登录用户名：密码：登录总结：1、class="modal-backdrop in" 背景会显示灰色，背景按钮相关都不可用2、class="modal in" 类似一块布，在这块布上画对话框 style="display:block" 表示显示这个块布
复制链接

扫一扫