Bootstrap之JavaScript的模态框(modal)使用-不离开父窗体的情况下的互动-点击按钮弹出对话框

Bootstrap的JavaScript的模态框(modal)是覆盖在父窗体上的子窗体。通常，目的是显示一个单独的内容，可以在不离开父窗体的情况下有一些互动。

子窗体可以自定义内容，可提供信息展示、交互等功能。

01-一个简单的、基本的模态框示例代码

定义模态框

点此打开模态框

模态框

这是弹出的模态框内容

运行效果如下：

在这里插入图片描述

02-一个完整的模态框示例代码

一个完整的模态框包括三个部分：头部、正文和页脚，分别使用类modal-header、modal-body和类modal-footer来定义。

示例代码如下：



    
    一个完整的模态框示例代码
    
    
    
    


一个完整的模态框示例代码


    
        
            
                早春呈水部张十八员外
                
            
            天街小雨润如酥，草色遥看近却无。
            最是一年春好处，绝胜烟柳满皇都。

重点代码说明：

①代码

天街小雨润如酥，草色遥看近却无。最是一年春好处，绝胜烟柳满皇都。

运行效果如下：

在这里插入图片描述

04-设置模态框的大小

示例代码如下：



    
    设置模态框大小
    
    
    
    


设置模态框大小



    
        
            
                大尺寸模态框
                
            
             落日无情最有情，遍催万树暮蝉鸣。
             听来咫尺无寻处，寻到旁边却不声。
        
    




    
        
            
                小尺寸模态框
                
            
            银烛秋光冷画屏，轻罗小扇扑流萤。
            天阶夜色凉如水，卧看牵牛织女星。

运行效果如下：

在这里插入图片描述

05-模态框网格

示例代码如下：



    
    模态框网格
    
    
    
    


模态框网格


    
        
            
                模态框网格
                
            
            
                
                    
                        .col-md-4
                        .col-md-4 .ml-auto
                    
                    
                        .col-md-3 .ml-md-auto
                        .col-md-3 .ml-md-auto
                    
                    
                        .col-auto .mr-auto
                        .col-auto

运行效果如下：

在这里插入图片描述

06-给模态框添加弹窗和提示

可以用JavaScript的popover方法实现给模态框添加弹窗，JavaScript的tooltip给模态框添加提示。

示例代码如下：



    
    弹窗和工具提示
    
    
    
    
    


弹窗和工具提示


    
        
            
                模态框标题
                
            
            
                
                    弹窗
                    古诗

                    工具提示
                    古诗一、古诗二 和 古诗三
                
                
                    $(document).ready(function(){
                        //找到对应的属性类别，添加弹窗和工具箱提示
                        $('.popover-test').popover();
                        $('.tooltip-test').tooltip();
                    });

上面代码中有一段JavaScript代码，关于这段代码的详细介绍，请参见我的另一篇博文，链接：

https://blog.csdn.net/wenhao_ir/article/details/134029389

运行效果如下：

在这里插入图片描述

07-为模态框添加动作的网页提示信息

在这里插入图片描述

示例代码如下：



    
    添加用户行为
    
    
    
    




    
        
            
                模态框标题
                
            
            模态框正文
            
                
                
            
        
    



    $(function(){
        $("#Modal-test").on("shown.bs.modal",function(){
            alert("模态框显示完成")
        })
        $("#Modal-test").on("hidden.bs.modal",function(){
            alert("模态框隐藏完成")
        })
    })

运行效果如下：

在这里插入图片描述