boostrap之模态框

boostrap之模态框

作者原创，未经允许，拒绝转载。

通过在一个起控制器作用的元素（例如：按钮）上添加 data-toggle="modal" 属性，或者 data-target="#myModal" 属性，再或者 href="#myModal" 属性，用于指向被控制的模态框。

<!-- 按钮触发模态框  -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  按钮文字
</button>

通过设置id="myModal"，让控制器来找到他。

<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <!-- 通过为 .modal-dialog 增加一个样式调整类实现。 -->
  <div class="modal-dialog  modal-sm">
    <div class="modal-content">
      <!-- 模态框头部 -->
      <div class="modal-header">
        <!-- 关闭按钮 -->
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <!-- 标题 -->
        <h4 class="modal-title" id="myModalLabel">标题</h4>
      </div>
      <!-- 模态框内容 -->
      <div class="modal-body">
        内容
      </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>

data-toggle="modal"：控制器
data-target="#myModal"：要控制的

class="modal fade"
modal：模态框父容器
fade：动画

class="modal-dialog modal-sm"
modal-dialog：模态框本身
modal-sm：设置大小

class="modal-content"：模态框内容

class="modal-header"：模态框头部

×关闭，此位置可以改成任意文字

data-dismiss="modal"：关闭事件

class="modal-title"：标题

class="modal-body"：内容

class="modal-footer"：底部

博客已搬家 技术寇的分享