Bootstrap弹出模态框的运用

作者：张铭标

撰写时间：2019年 6月3日

• Bootstrap模态框主要分为三部分:modal-header,.modal-body,.modal-footer.
• 在使用之前需要引入一些插件:
  bootstrap.bundle.js,jquery插件和bootstrap.css.这几个插件才能够使用.下面是模态框的基本代码:

效果图:

这是模态框的基本用法,在使用模态框的时候注意要尽量加上一些明显的关闭按钮,当然点击模态框的backdrop也就是灰色背景区域也可以自动关闭模态框,但最好加上一些关闭按钮对后面程序的开发比较有帮助.

在模态框中可以使用栅格系统,只要在.modal-body里面加入.container-fluid即可.

如果只需要弹出模态框而不用淡入淡出的效果,只要在modal元素中移除.fade即可.

我们可以通过JavaScript调用id来打开动态模态框,经典代码:

function
openmodal(){

//打开模态框

$(‘#mymodal’).modal(“show”);

}

模态框也可以调节大小,通过modal-dialog modal-lg和modal-dialog modal-sm来选择它的大小,通常用大的模态框居多.模态框是默认有滚动条的,如果你不需要滚动条可以设置下面的代码来实现,它会自动帮你重新调整模态框的位置而没有滚动条:

$(‘#myModal’).modal(‘handleUpdate’)

• 下面我们进行一些实操例子来具体说明模态框的使用:

一.
一般的模态框

首先引入一些必须的jquery插件,bootstrap插件和样式.之后编写模态框代码如下图:

由图可见模态框的基本代码,这里我顺便加上了一个button按钮通过点击事件来打开这个模态框,接着再到body底部写点击事件的方法,用到了关键代码modal和show来打开模态框.

最后是效果图:点击上面的按钮就弹出了刚才写的模态框,在打开的时候默认是有淡出淡入的效果的,如果不需要只要把.fade去掉就可以了.中间的内容部分如果特别的长的话,模态框就会出现一个滚动条可以滚动查看内容,如果不需要滚动的功能只需调用$('#myModal').modal('handleUpdate')它就会自动调整模态框的位置不会再出现滚动条.

二.
大模态框和小模态框的演示

代码部分:

<button type="button"class="btn btn-primary" data-toggle="modal"datatarget=""onclick="openBigModal()">大模态框</button>
<div class="modal fade"id="modBIG" tabindex="-1" role="dialog"aria-labelledby="exampleModalLabel" aria-hidden="true">

   <div class="modal-dialogmodal-lg" role="document">

<divclass="modal-content">

                <divclass="modal-header">

                    <h5class="modal-title" id="exampleModalLabel">大模态框头部</h5>

                    <buttontype="button" class="close" data-dismiss="modal"aria-label="Close">

                        <spanaria-hidden="true">&times;</span>

                    </button>

                </div>

                <divclass="modal-body">

                   // 内容部分

                </div>

                <divclass="modal-footer">

                    <buttontype="button" class="btn btn-secondary"data-dismiss="modal">关闭</button>

                    <buttontype="button" class="btn btn-primary">保存</button>

                </div>

            </div>

        </div>

    </div>

<!-- 小模态框 -->

 <button type="button"class="btn btn-primary" data-toggle="modal"data-target=""onclick="openSmallModal()">小模态框</button>

    <div class="modal fade"id="modSmall" tabindex="-1" role="dialog" arialabelledby="exampleModalLabel"
aria-hidden="true">

        <div class="modal-dialogmodal-sm" role="document">

            <divclass="modal-content">

                <divclass="modal-header">

                    <h5class="modal-title" id="exampleModalLabel">小模态框头部</h5>

                    <buttontype="button" class="close" data-dismiss="modal"aria-label="Close">

                        <spanaria-hidden="true">&times;</span>

                    </button>

                </div>

                <divclass="modal-body">

                    内容部分

                </div>

                <divclass="modal-footer">

                    <buttontype="button" class="btn btn-secondary"data-dismiss="modal">关闭</button>

                    <buttontype="button" class="btn btn-primary">保存</button>

                </div>

            </div>

        </div>

</div>

这里一样是给了两个button的点击事件,下面是点击事件的方法

最后出来的效果图:

这些就是模态框的常用使用方法.