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')它就会自动调整模态框的位置不会再出现滚动条.

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

代码部分:

大模态框


   




                

                    大模态框头部

                    

                        ×

                    

                

                

                   // 内容部分

                

                

                    关闭

                    保存

                

 小模态框

    


        


            

                

                    小模态框头部

                    

                        ×

                    

                

                

                    内容部分

                

                

                    关闭

                    保存