模态弹出框--实现原理解析（二），玩转Bootstrap（基础）教程-慕课网

模态弹出框--实现原理解析（二）

蒙板样式实现：

大家或许注意到了，在做模态弹出窗时，底部常常会有一个透明的黑色蒙层效果，如下图所示：

在Bootstrap框架中为模态弹出窗也添加了一个这样的蒙层样式“modal-backdrop”，只不过他默认情况下是全屏黑色的：

/*bootstrap.css文件第5424行～第5432行*/
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
}

同样，给其添加了一个过渡动画，从fade到in，把opacity值从0变成了0.5。上图展示的就是in状态下的效果：

/*bootstrap.css文件第5433行～第5440行*/
.modal-backdrop.fade {
  filter: alpha(opacity=0);
  opacity: 0;
}
.modal-backdrop.in {
  filter: alpha(opacity=50);
  opacity: .5;
}

两种尺寸选择：

除此之外，Bootstrap框架还为模态弹出窗提供了不同尺寸，一个是大尺寸样式“modal-lg”，另一个是小尺寸样式“modal-sm”。其结构上稍做调整：

<!-- 大尺寸模态弹出窗 -->
<div class="modal fade bs-example-modal-lg" tabindex="-1"role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <divclass="modal-dialog modal-lg">
       <divclass="modal-content"> ... </div>
    </div>
</div>
<!-- 小尺寸模态弹出窗 -->
<divclass="modal fade bs-example-modal-sm"tabindex="-1"role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <divclass="modal-dialog modal-sm">
       <divclass="modal-content"> ... </div>
    </div>
</div>

来简单的看一个示例效果：

对于这两种尺寸的模态弹出窗，Bootstrap在媒体查询中做过处理：代码同上见bootstrap.css

任务

我来试试：在右侧补充代码，把右侧弹出窗修改为“小尺寸”

?不会了怎么办

index.html

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>模态弹出框--实现原理解析（二）</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body> <h3>大/小尺寸模态弹出框</h3>  <button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg"> 大的模态弹出窗 </button> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">模态弹出窗标题</h4> </div> <div class="modal-body"> <p>模态弹出窗主体内容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存</button> </div> </div> </div> </div>  <button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm"> 小的模态弹出窗 </button> <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">模态弹出窗标题</h4> </div> <div class="modal-body"> <p>模态弹出窗主体内容</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存</button> </div> </div> </div> </div> <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>

提问题

提交

其他问答

查看更多本节问答

写笔记

公开笔记

提交

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

8-6 模态弹出框--实现原理解析（二）