Bootstrap 模态框（Modal）

#Bootstrap 模态框（Modal）插件详细讲解

#####第一步：
加载框架：

https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
2.bootstrap.js 或压缩版的 bootstrap.min.js

#####第二步：
用法
您可以切换模态框（Modal）插件的隐藏内容：

通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle=“modal”，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id=“identifier”）。
通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id=“identifier” 的模态框：

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

#####使用代码1（一个ID弹出）：

<!-- 按钮触发模态框 data-toggle="modal" 点击这个按钮会触发模态框   data-target="#myModal 这个是点击后回触发哪个模态框？ 唯一的id标识-->
<!--data-backdrop="static"  这个说明，只能点击关闭按钮X  才能关闭弹窗，点击其他区域都不能关闭弹窗-->
<button class="btn btn-primary"  data-toggle="modal" data-target="#myModal" data-backdrop="static">点击弹窗</button>
<!-- 模态框（Modal） 然后给模态框标识唯一的id 来区分不同的模态框  modal fade  淡入淡出的效果-->
<div class="modal fade" id="myModal" tabindex="-1" ><div class="modal-dialog"><div class="modal-content"  ><div class="modal-header"><!--class="close" 给关闭按钮样式  data-dismiss="modal" 当点击这个关闭按钮时 关闭弹窗--><h4 class="modal-title" style="width: 100%;">会员登录</h4><button type="button" class="close" data-dismiss="modal" aria-hidden="true" ><span>&times;</span></button></div><div class="modal-body"><form action="" method="post" class="form-horizontal"><div class="form-group"><div class="col-sm-10"><input type="email" class="form-control" id="inputEmail3" placeholder="请输入邮箱账号/手机号"></div></div><div class="form-group"><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码"></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><div class="checkbox"><label ><input type="checkbox" > 记住密码    </label></div></div></div><p class="text-muted">还没有账号？</p><a href="http://wwww.baidu.com"><p class="text-info text-right">忘记密码？</p></a>
<!--  注册按钮-->
<button class="btn btn-primary"  data-toggle="modal" data-target="#myModa2" data-backdrop="static" >点击弹窗</button>
<button type="button" class="btn btn-success  btn-block">登录 </button></form><!--    注册表单       --><form action="" method="post" class="form-horizontal" id="zhuce"><div class="form-group"><div class="col-sm-10"><input type="email" class="form-control" id="inputEmail3" placeholder="请输入邮箱账号/手机号"></div></div><div class="form-group"><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码"></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><div class="checkbox"><label ><input type="checkbox" > 记住密码    </label></div></div></div><button type="button" class="btn btn-success  btn-block">登录 </button></form><div class="modal-footer"><!--<button class="btn btn-default">注册</button><button class="btn btn-primary">登录</button>--></div></div></div>
</div>
<!--登入结束-->

#####代码讲解：

modal-title 定义模态框的标题
使用模态窗口，您需要有某种触发器。您可以使用按钮或链接。这里我们使用的是按钮。
如果您仔细查看上面的代码，您会发现在标签中，data-target="#myModal" 是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框，然后为每个模态框创建不同的触发器。现在，很明显，您不能在同一时间加载多个模块，但您可以在页面上创建多个在不同时间进行加载。
在模态框中需要注意两点：
第一是 .modal，用来把

的内容识别为模态框。
第二是 .fade class。当模态框被切换时，它会引起内容淡入淡出。
aria-labelledby=“myModalLabel”，该属性引用模态框的标题。
属性 aria-hidden=“true” 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。

，modal-header 是为模态窗口的头部定义样式的类。 class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。 data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。 class="modal-body"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。 class="modal-footer"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。 data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。

#####代码2（多个ID之间的切换）

<!-- 注册窗口 --><div id="register" class="modal fade" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-body"><button class="close" data-dismiss="modal"><span>&times;</span></button></div><div class="modal-title"><h1 class="text-center">注册</h1></div><div class="modal-body"><form class="form-group" action=""><div class="form-group"><label for="">用户名</label><input class="form-control" type="text" placeholder="6-15位字母或数字"></div><div class="form-group"><label for="">密码</label><input class="form-control" type="password" placeholder="至少6位字母或数字"></div><div class="form-group"><label for="">再次输入密码</label><input class="form-control" type="password" placeholder="至少6位字母或数字"></div><div class="form-group"><label for="">邮箱</label><input class="form-control" type="email" placeholder="例如:123@123.com"></div><div class="text-right"><button class="btn btn-primary" type="submit">提交</button><button class="btn btn-danger" data-dismiss="modal">取消</button></div><a href="" data-toggle="modal" data-dismiss="modal" data-target="#login">已有账号？点我登录</a></form></div></div></div></div><!-- 登录窗口 --><div id="login" class="modal fade"><div class="modal-dialog"><div class="modal-content"><div class="modal-body"><button class="close" data-dismiss="modal"><span>&times;</span></button></div><div class="modal-title"><h1 class="text-center">登录</h1></div><div class="modal-body"><form class="form-group" action=""><div class="form-group"><label for="">用户名</label><input class="form-control" type="text" placeholder=""></div><div class="form-group"><label for="">密码</label><input class="form-control" type="password" placeholder=""></div><div class="text-right"><button class="btn btn-primary" type="submit">登录</button><button class="btn btn-danger" data-dismiss="modal">取消</button></div><a href="" data-toggle="modal" data-dismiss="modal" data-target="#register">还没有账号？点我注册</a></form></div></div></div></div>```#####问题一：bootstrap多层模态框滚动条消失怎么办监测html发现，当打开模态框时，会给 body 元素加一个 modal-open 的 class，而在 bootstrap.css 中，有这样一条 css 规则：
.modal-open .modal {overflow-x:hidden; overflow-y:auto}因为有 overflow-y:auto，所以模态框才可以滚动，而当关闭任何一个模态框时，body 元素的 css 规则 modal-open 会被移除掉，自然 overflow-y:auto 也就没有了，所以模态框的滚动条就消失了。
解决方案是在模态框的 div 元素上加一条 style="overflow: auto"，如下：
<div class="modal fade" ... style="overflow: auto">这样，模态框的滚动就不依赖 body 元素的 css 规则 modal-open 了。```<style type="text/css">.modal-open{overflow-y: scroll;}body{padding-right:15px!important;}</style>```加背景图片```.modal-content{background-image: url(assets/img/登入注册背景图片.jpg);}```错误代码加样式
```.error{color:red;
}```

Bootstrap 模态框（Modal）相关推荐

地图选点 php,百度地图选点–Bootstrap模态框(Modal)插件
在网站的开发过程中,例如商家的注册等,需要商家设定自己的经纬度进行对商家的精确定位,同时也方便用户查找到附近距离范围内的商家.这样更利于网站的用户和商家互动.商家设定自己的经纬度就需要使用到百度地图2 ...
Bootstrap模态框(modal)显示、隐藏与禁用ESC代码实现
场景对于弹出框bootstrap就有模态框(modal). 有时显示模态框,按键盘上ESC就会关闭模态框,所以在打开模态框时设置其属性. 实现 modal显示: $("#apAddAndE ...
python测试开发django-122.bootstrap模态框(modal)学习
前言模态框(Modal)是覆盖在父窗体上的子窗体,使用场景比如:在页面上编辑内容的时候经常需要弹出一个框框,可以编辑字段提交. 点删除按钮的时候,需要弹出二次确认框,这种现页面上的框框就是模态框模 ...
bootstrap 模态框满屏_如何设置Bootstrap模态框modal的高度和宽度?
以下图片是Bootstrap4模态框默认大小,一般情况Bootstrap模态框有两个默认大小,一个是"modal-sm" 小模态框,一个是"modal-lg"大 ...
禁用 Bootstrap 模态框(Modal) 点击空白时自动关闭
在做项目的时候,来了这么一个需求,要求打开模态框后,点击空白的地方不让他自动关闭,只能点击关闭按钮才能关闭. 有了需求,就开始查找资料寻求解决的方法. 我找到的解决方法如下: $('#registCo ...
Bootstrap模态框modal的高度和宽度设置
(1)高度将style="height:900px"放在<div class = "modal-dialog">或者更外层上,整个模态框的高度不会 ...
纯html点击按钮弹出表单,Bootstrap使用模态框modal实现表单提交弹出框
Bootstrap 模态框(Modal)插件模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如 ...
Bootstrap 模态框插件Modal 的事件
事件 Bootstrap模态框插件modal提供了 4 个事件,通过监听这些事件,可以对特定操作阶段的用户行为作出响应.这些事件及含义见表 5‑2. 表 5‑2 Bootstrap模态框插件modal ...
Bootstrap 模态框插件Modal 的方法
方法 Bootstrap模态框插件Modal的方法主要用来打开.关闭.隐藏Bootstrap模态框插件Modal: 1..modal(options) 使用一个可选的对象参数 options 调用 B ...
Bootstrap 模态框插件Modal 的选项
选项 Bootstrap模态框插件modal提供了 4 个选项,所有的选项都可以通过 data 属性或 JavaScript 进行设置.见表 5‑1: 表 5‑1 Bootstrap模态框插件moda ...

Bootstrap 模态框（Modal）

Bootstrap 模态框（Modal）相关推荐

最新文章

热门文章