概述:
效果:
代码:
<div class="modal in" style="display:block">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close">×</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" 关闭样式,× 就是右上角的叉
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="" 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 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
<script type="text/javascript">
$(function(){
$('#login').modal({
show:false,
backgroup:false
});
})
</script>
如何利用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>
login.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实现
<script type="text/javascript">$(function(){
$('#login').modal({
show:false,
backgroup:false,
remote:'login.html'
});
})
</script>
方式二:
登录a 标签 设置href="login.html" 需要注意就是要注释 方式一的js代码 否则没有效果
<li><a href="login.html" data-toggle="modal" data-target="#login">登录</a></li>
方式三:
<div class="modal in fade" id="login" tabindex="-1" data-remote="login.html" >
调试小技巧:
对话框的事件监听:
$(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>