第二百四十三节，Bootstrap模态框插件

2.选用参数，写在触发模态框的按钮里

可以通过在 HTML 元素上设置 data-*的属性声明来控制效果。

data-backdrop 布尔值或'static' true默认值 true，表示背景存在黑灰透明遮罩，且单击空白背景可关闭弹窗；如果为 false，表示背景不存在黑灰透明遮罩，且点击空白背景不可关闭弹窗；如果是字符串'static'，表示背景存在黑灰透明遮罩，且点击空白不可关闭弹窗。

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-backdrop="true">
    点击弹窗
button>

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-backdrop="false">
    点击弹窗
button>

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-backdrop="static">
    点击弹窗
button>

data-keyboard 布尔值 true 如果是 true，按 esc 键会关闭窗口；如果是 false，按 esc 键会不会关闭。

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-backdrop='static' data-keyboard="false">
    点击弹窗
button>

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-backdrop='static' data-keyboard="true">
    点击弹窗
button>

data-show 布尔值 true 如果是 true，初始化时，默认显示；如果是 false，初始化时，默认隐藏。

在按钮触发，不是很明显

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-show="true">
    点击弹窗
button>

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-show="false">
    点击弹窗
button>

href url 路径 空值如果值不是以#号开头，则表示一个url 地址，加载 url 内容到modal-content 模态框内容区域div里，并只加载一次。如果是#号，就是取代data-target 的方法。

如果值是以#开头就是代替data-target属性后面跟事件指向id名称

<button class="btn btn-primary btn-lg" data-toggle="modal" data-backdrop="static" href="#myModal">
    点击弹窗
button>

如果href值不是以#开头，是一个远程地址如bfq.html，就是将远程bfq.html文件里的内容加载到modal-content 模态框内容区域div里

bfq.html文件

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">
        <span>×span>
    button>
    <h4 class="modal-title">远程加载h4>
div>

<div class="modal-body">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4">6div>
            <div class="col-md-4">6div>
            <div class="col-md-4">6div>
        div>
    div>
div>
<div class="modal-footer">
    <button type="button" class="btn btn-default">
        注册
    button>
    <button type="button" class="btn btn-primary">
        登录
    button>
div>

模态框页面

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            
        div>
    div>
div>

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-backdrop="static" href="bfq.html">
    点击弹窗
button>

当然，也可以在 JavaScript 直接设置。

modal()将指定元素执行模态框方法，参数是一个对象，里写各种需要属性参数(Bootstrap)

backdrop 布尔值或'static'true默认值 true，表示背景存在黑灰透明遮罩，且单击空白背景可关闭弹窗；如果为 false，表示背景不存在黑灰透明遮罩，且点击空白背景不可关闭弹窗；如果是字符串'static'，表示背景存在黑灰透明遮罩，且点击空白不可关闭弹窗。

keyboard 布尔值 true 如果是 true，按 esc 键会关闭窗口；如果是 false，按 esc 键会不会关闭。

show 布尔值 true 如果是 true，初始化时，默认显示；如果是 false，初始化时，默认隐藏。

remote #路径 url远程获取指定内容填充到modal-content 容器内。

bfq.html文件

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">
        <span>×span>
    button>
    <h4 class="modal-title">远程加载h4>
div>

<div class="modal-body">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4">6div>
            <div class="col-md-4">6div>
            <div class="col-md-4">6div>
        div>
    div>
div>
<div class="modal-footer">
    <button type="button" class="btn btn-default">
        注册
    button>
    <button type="button" class="btn btn-primary">
        登录
    button>
div>

模态框页面

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            
        div>
    div>
div>

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    点击弹窗
button>

js文件

$(function () {
    $('#myModal').modal({
        backdrop:"static",  //背景存在黑灰透明遮罩，且点击空白不可关闭弹窗。
        keyboard:false,     //false，按 esc 键会不会关闭模态框
        show:false,         //如果是 false，初始化时，默认隐藏
        remote:"bfq.html"   //远程获取指定内容填充到modal-content 容器内
    });
});

3.方法

toggle .modal('toggle'); 触发时，反转切换弹窗状态(Bootstrap)
show .modal('show'); 触发时，显示弹窗(Bootstrap)
hide .modal('hide'); 触发时，关闭弹窗(Bootstrap)

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span>×span>
                button>
                <h4 class="modal-title">会员登录h4>
            div>
            
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-4">1div>
                        <div class="col-md-4">1div>
                        <div class="col-md-4">1div>
                    div>
                div>
            div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default">
                    注册
                button>
                <button type="button" class="btn btn-primary">
                    登录
                button>
            div>
        div>
    div>
div>

<button class="btn btn-primary btn-lg" id="sdfg">
    点击弹窗
button>

js

$(function () {
    $('#sdfg').on('click', function () {  //获取按钮执行点击事件
        $('#myModal').modal('show');      //点击按钮后将模态框，反转切换弹窗状态，也就是隐藏显示切换
    });
    $('#myModal').modal({
        backdrop:"static",  //背景存在黑灰透明遮罩，且点击空白不可关闭弹窗。
        keyboard:false,     //false，按 esc 键会不会关闭模态框
        show:false,         //如果是 false，初始化时，默认隐藏
    });
});

其他两个方法使用相同

4.事件

模态框支持 4 种事件，分别对应弹出前、弹出后、关闭前和关闭后。

show.bs.modal 在 show 方法调用时立即触发。(Bootstrap)
shown.bs.modal 在模态框完全显示出来，并且等 CSS 动画完成之后触发。(Bootstrap)
hide.bs.modal 在 hide 方法调用时，但还未关闭隐藏时触发。(Bootstrap)
hidden.bs.modal 在模态框完全隐藏之后，并且等 CSS 动画完成之后触发。(Bootstrap)
loaded.bs.modal '远程数据加载完毕后触发(Bootstrap)

js

$(function () {
    $('#sdfg').on('click', function () {  //获取按钮执行点击事件
        $('#myModal').modal('show');      //点击按钮后将模态框，反转切换弹窗状态，也就是隐藏显示切换
    });
    $('#myModal').modal({
        backdrop:"static",  //背景存在黑灰透明遮罩，且点击空白不可关闭弹窗。
        keyboard:false,     //false，按 esc 键会不会关闭模态框
        show:false,         //如果是 false，初始化时，默认隐藏
    });
    $('#myModal').on('show.bs.modal', function () {
        alert('在 show 方法调用时立即触发！');
    });
    $('#myModal').on('shown.bs.modal', function () {
        alert('在模态框显示完毕后触发！');
    });
    $('#myModal').on('hide.bs.modal', function () {
        alert('在 hide 方法调用时立即触发！');
    });
    $('#myModal').on('hiden.bs.modal', function () {
        alert('在模态框显示完毕后触发！');
    });
    $('#myModal').on('loaded.bs.modal', function () {
        alert('远程数据加载完毕后触发！');
    });
});

HTML

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span>×span>
                button>
                <h4 class="modal-title">会员登录h4>
            div>
            
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-4">1div>
                        <div class="col-md-4">1div>
                        <div class="col-md-4">1div>
                    div>
                div>
            div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default">
                    注册
                button>
                <button type="button" class="btn btn-primary">
                    登录
                button>
            div>
        div>
    div>
div>

<button class="btn btn-primary btn-lg" id="sdfg">
    点击弹窗
button>