bootstrap模态框简单案例

模态框（Modal）

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下提示信息，确认信息，表单,登录，注册等内容。模态框弹出时其他页面元素不可被选中。

首先需要定义一个按钮 同时定义 data-toggle=“modal” data-target="#exampleModalCenter"

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  登录
</button>

创建模态框模态框中的id必须同按钮中的data-targe 中的内容相同(模态框默认是隐藏的只有在触发事件时显示)

<div class="modal fade border rounded-0" id="exampleModalCenter" >
	...
</div>

打开模态窗口

触发模态窗口有两种方法

1. 通过data 属性：在触发控制元素（比如按钮或者链接）上设置属性data-toggle=“modal”，同时设置 data-target="#exampleModalCenter" 或href="#exampleModalCenter" 来指定要切换的特定的模态框（带有 id=“exampleModalCenter”）。一般而言使用这种方法已经可以完成工作中的大部分需求，
2. 通过 JavaScript:当一些更灵活的需求出现的时候通过 JavaScript

关闭模态窗口

关闭模态窗口，只需要给模态框内的button添加data-dismiss="modal"属性即可，同样的也可以通过JavaScript来操作，
注意class="close"只是为内容添加了样式，并不起到任何控制模态框的作用。

Bootstrap模态框主要分为三部分.modal-header,.modal-body,.modal-footer

<div class="modal-header ">
    头部
  </div>
  <div class="modal-body">
		内容
  </div>
  <div class="modal-footer">
	  脚注
  </div>

模态框的事件

事件类型	描述
show.bs.modal	show 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。
shown.bs.modal	此事件在模态框已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。
hide.bs.modal	hide 方法调用之后立即触发该事件。
hidden.bs.modal	此事件在模态框被隐藏（并且同时在 CSS 过渡效果完成）之后被触发。
loaded.bs.modal	从远端的数据源加载完数据之后触发该事件。

一个简单的案例

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  登录
</button>

<!-- Modal -->
<div class="modal fade border rounded-0" id="exampleModalCenter" >
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content ">
      <div class="modal-header ">
  		        头部
        <button type="button" class="close positiona" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
   
      </div>
      
      <div class="modal-body ">
      	内容
      </div>
      <div class="modal-footer ">
      	脚注
      </div>
    </div>
  </div>
</div>