首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

Bootstrap基本插件学习笔记之模态对话框(16)

作者：常思 | 来源：互联网 | 2022-02-26 16:33
这篇文章主要为大家详细介绍了Bootstrap基本插件学习笔记之模态对话框的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

Bootstrap自带了很多JQuery插件，给用户做前端开发提供了很大的方便。对于每一个插件，有2种引用方式：一是单独引用，即使用Bootstrap的单独*.js文件，这种方式需要注意的是一些插件和CSS组件可能依赖其他插件，所以单独引用的时候，需要弄清楚这种包含关系一并引用；二是直接引用完整的bootstrap.js或者压缩版的bootstrap.min.js，需要注意的是不能同时引用这2个文件。

Bootstrap自带了很多基本的插件，包括模态对话框、标签切换、Tooltip提示工具等。首先来总结下模态对话框的使用。

0x01基本样式

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。Bootstrap Modals（模态框）是使用定制的JQuery插件创建的。它可以用来创建模态窗口丰富用户体验，或者为用户添加实用功能。
下面是一个基本样式：




 
 
 
 


几点说明：


（1）使用模态窗口，需要有某种触发器，可以使用按钮或链接。这里我们使用的是按钮。 

（2）data-target="#myModal" 是想要在页面上加载的模态框的目标。 

（3）在模态框中需要注意两点：一是.modal，用来把 
 的内容识别为模态框；二是 .fade class。当模态框被切换时，它会引起内容淡入淡出。 

（4）
，modal-header 是为模态窗口的头部定义样式的类。 

（5）class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。 

（6）data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。 

（7）class="modal-body"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。 

（8）class="modal-footer"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。 

（9）data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。


0x02 JS方式加载


除了上面通过属性方式加载外，还可以通过JS方式加载模态对话框，下面是一个用户登录界面的简单实现：







 
 
 
 


上面的例子包含了JS加载modal的过程，也包括了设置模态对话框宽度、响应事件等内容。modal方法结合一些参数来实现特殊效果： 




（1）把内容作为模态框激活。接受一个可选的选项对象：




$("#myModal").modal({
keyboard:true,
})





（2）状态切换




$("#myModal").modal('toggle') //手动打开模态框。
$("#myModal").modal('hide') //手动隐藏模态框。





0x03 事件


Bootstrap模态对话框还定义了事件，通过“钩子”的方式调用：


（1）show.bs.modal 

在调用 show 方法后触发：




$('#myModal').on('show.bs.modal', function () {
 // 执行一些动作...
})





（2）shown.bs.modal 

当模态框对用户可见时触发（将等待 CSS 过渡效果完成）：




$('#myModal').on('shown.bs.modal', function () {
// 执行一些动作...
})





（3）hide.bs.modal 

当调用 hide 实例方法时触发：




$('#myModal').on('hide.bs.modal', function () {
 // 执行一些动作...
})





（4）hidden.bs.modal 

当模态框完全对用户隐藏时触发：




$('#myModal').on('hidden.bs.modal', function () {
 // 执行一些动作...
})





上面用户登录的例子中事件部分代码：




$("#myModal").on("hidden.bs.modal",function () {
  alert('test');
 })





当模态框完全对用户隐藏时，就会调用执行这段JS代码。


如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：


Bootstrap学习教程


Bootstrap实战教程


Bootstrap插件使用教程


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

                            
                                    

        
        
    



    

        
    




    

    

        
推荐阅读

        

            
    
                                
  • 
                    
    
                        js
                        
    Spring Boot 中静态资源映射详解
    
                    
    

                    
    
                                                
    
                            Spring Boot 中静态资源映射详解
                        
    
                                                
    
                        本文深入探讨了 Spring Boot 如何简化 Web 应用中的静态资源管理，包括默认的静态资源映射规则、WebJars 的使用以及静态首页的处理方法。通过本文，您将了解如何高效地管理和引用静态资源。 ...
                        [详细]
                    
    
                    
    

                    

                
    • 

                
                                
  • 
                    
    
                        js
                        
    基于JQuery实现的评分插件
    
                    
    

                    
    
                                                
    
                            基于JQuery实现的评分插件
                        
    
                                                
    
                        本文介绍了一个使用JQuery创建的交互式评分控件。当用户将鼠标悬停在星星上时，左侧的星星会变为实心，右侧保持空心，并显示对应的评分等级；移开鼠标后，所有星星恢复为空心状态。 ...
                        [详细]
                    
    
                    
    

                    

                
    • 

                                
  • 
                    
    
                    
                
    • 
                
                                
  • 
                    
    
                        js
                        
    2019年前端技术趋势及职业发展路径
    
                    
    

                    
    
                                                
    
                        本文探讨了2019年前端技术的发展趋势，包括工具化、配置化和泛前端化等方面，并提供了详细的学习路线和职业规划建议。 ...
                        [详细]
                    
    
                    
    

                    

                
    • 

                
                                
  • 
                    
    
                        js
                        
    Ionic框架在HTML5中的应用与实践
    
                    
    

                    
    
                                                
    
                        本文详细介绍了Ionic框架的使用方法及其与Angular的集成。Ionic框架是一个强大的前端开发工具，适用于构建跨平台的移动应用程序。文章将探讨如何引入必要的CSS和JavaScript文件，并解释bundle.js中包含的核心功能，如路由等。 ...
                        [详细]
                    
    
                    
    

                    

                
    • 

                
                                
  • 
                    
    
                        jquery
                        
    实现页面自动加载更多内容功能：类微博和Pinterest的设计
    
                    
    

                    
    
                                                
    
                        在现代Web应用中，当用户滚动到页面底部时，自动加载更多内容的功能变得越来越普遍。这种无刷新加载技术不仅提升了用户体验，还优化了页面性能。本文将探讨如何实现这一功能，并介绍一些实际应用案例。 ...
                        [详细]
                    
    
                    
    

                    

                
    • 

                
                                
  • 
                    
    
                        js
                        
    解决Selenium浏览器实例化位置导致的闪退问题
    
                    
    

                    
    
                                                
    
                        本文探讨了在使用Selenium进行自动化测试时，由于webdriver对象实例化位置不同而导致浏览器闪退的问题，并提供了详细的代码示例和解决方案。 ...
                        [详细]
                    
    
                    
    

                    

                
    • 

                
                                
  • 
                    
    
                        js
                        
    解决Anaconda安装TensorFlow时遇到的TensorBoard版本问题
    
                    
    

                    
    
                                                
    
                            解决Anaconda安装TensorFlow时遇到的TensorBoard版本问题
                        
    
                                                
    
                        本文介绍了在使用Anaconda安装TensorFlow时遇到的“Could not find a version that satisfies the requirement tensorboard”错误，并提供详细的解决方案，包括创建虚拟环境和配置PyCharm项目。 ...
                        [详细]
                    
    
                    
    

                    

                
    • 

                
                                
  • 
                    
    
                        js
                        
    Node.js 进程异常时自动发送邮件通知
    
                    
    

                    
    
                                                
    
                        在项目部署后，Node.js 进程可能会遇到不可预见的错误并崩溃。为了及时通知开发人员进行问题排查，我们可以利用 nodemailer 插件来发送邮件提醒。本文将详细介绍如何配置和使用 nodemailer 实现这一功能。 ...
                        [详细]
                    
    
                    
    

                    

                
    • 

                
                                
  • 
                    
    
                        js
                        
    嵌入式开发环境搭建与文件传输指南
    
                    
    

                    
    
                                                
    
                            嵌入式开发环境搭建与文件传输指南
                        
    
                                                
    
                        本文详细介绍了如何为嵌入式应用开发搭建必要的软硬件环境，并提供了通过串口和网线两种方式将文件传输到开发板的具体步骤。适合Linux开发初学者参考。 ...
                        [详细]
                    
    
                    
    

                    

                
    • 

                
                                
  • 
                    
    
                        js
                        
    解决TensorFlow CPU版本安装中的依赖问题
    
                    
    

                    
    
                                                
    
                            解决TensorFlow CPU版本安装中的依赖问题
                        
    
                                                
    
                        本文记录了在安装CPU版本的TensorFlow过程中遇到的依赖问题及解决方案，特别是numpy版本不匹配和动态链接库（DLL）错误。通过详细的步骤说明和专业建议，帮助读者顺利安装并使用TensorFlow。 ...
                        [详细]
                    
    
                    
    

                    

                
    • 

                
                                
  • 
                    
    
                        js
                        
    HTML 文件上传按钮的样式设计
    
                    
    

                    
    
                                                
    
                        本文详细介绍了如何使用 HTML 和 CSS 对文件上传按钮进行样式美化，使用户界面更加友好和美观。 ...
                        [详细]
                    
    
                    
    

                    

                
    • 

                
                                
  • 
                    
    
                        js
                        
    一个登陆界面
    
                    
    

                    
    
                                                
    
                            一个登陆界面
                        
    
                                                
    
                        预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ...
                        [详细]
                    
    
                    
    

                    

                
    • 

                
                                
  • 
                    
    
                        js
                        
    交互式左右滑动导航菜单设计
    
                    
    

                    
    
                                                
    
                            交互式左右滑动导航菜单设计
                        
    
                                                
    
                        本文介绍了一种使用HTML和JavaScript实现的左右可点击滑动导航菜单的方法，适用于需要展示多个链接或项目的网页布局。 ...
                        [详细]
                    
    
                    
    

                    

                
    • 

                
                                
  • 
                    
    
                        js
                        
    JavaScript前端开发中常用的四种继承方法详解
    
                    
    

                    
    
                                                
    
                        本文深入探讨了JavaScript中实现继承的四种常见方法，包括原型链继承、构造函数继承、组合继承和寄生组合继承。对于正在学习或从事Web前端开发的技术人员来说，理解这些继承模式对于提高代码质量和维护性至关重要。 ...
                        [详细]
                    
    
                    
    

                    

                
    • 

                
                                
  • 
                    
    
                        js
                        
    实现元素随滚动条移动的效果
    
                    
    

                    
    
                                                
    
                        本文介绍了如何使用JavaScript和jQuery实现页面元素随着滚动条的移动而相应变化位置的功能，提供了一段简洁的代码示例。 ...
                        [详细]
                    
    
                    
    

                    

                
    • 

                
                
                                
  • 
                    
                    
                    
                
    • 
                

            

        

    





















    


    

        

            
            

                
                author-avatar
            


            

                常思            


            

                这个家伙很懒，什么也没留下！            



        

    


    

    

    
    

    

        
Tags | 热门标签

        

            
        

    


    
    

        

            

            

        

        
RankList | 热门文章

        

            
        

    

    

    






    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具  | 在线工具

    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved  |   京公网安备 11010802041100号  |  京ICP备19059560号-4 | PHP1.CN 第一PHP社区      版权所有