Bootstrap响应式前端框架笔记十六——模态框交互

简介: Bootstrap响应式前端框架笔记十六——模态框交互

模态框也可以称为弹出窗,其作用是当用户点击某个功能按钮后,在网页上弹出一个内容窗口。在Bootstrap中,创建模态框十分简单。首先模态框组件通过modal类来创建,其默认隐藏,开发者可以使用data相关属性来将其唤出。简单示例如下:


<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

正常模态框

</button>

<!--这里设置的id用于绑定在按钮事件上-->

<div class="modal fade" id="myModal" tabindex="-1">

   <!--modal-dialog为悬浮框模式的模态框-->

<div class="modal-dialog">

       <!--模态框组件内容部分-->

 <div class="modal-content">

           <!--头部内容-->

  <div class="modal-header">

               <!--为按钮绑定data-dismiss="modal"可以实现点击取消模态框-->

   <button type="button" class="close" data-dismiss="modal"><span>&times;</span>

               </button>

   <h4 class="modal-title" id="myModalLabel">模态框标题</h4>

  </div>

           <!--模态框主体内容-->

     <div class="modal-body">

     模态框内容

     </div>

           <!--模态框尾部内容-->

        <div class="modal-footer">

         <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

         <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>

     </div>

    </div>

   </div>

</div>

效果如下:

image.png



可以为model-dialog类增加modal-lg或者modal-sm可以创建大号的模态框或者小号的模态框。需要注意,模态框的弹出时有渐入动画的,如果不需要动画效果,只需要将fade类去掉即可。


   对于定义为modal模块的div,开发者也可以通过设置data属性的方式来对模态框进行设置,列举如下:


data-backdrop  布尔"true"或"false"   如果设置为true,则显示灰色背景,否则不显示灰色背景

   data-keyboard 布尔值 设置点击键盘esc键是否隐藏模态框,注意,必须设置tabindex属性,这个值才有效

data-show 布尔值 模态框初始化后是否立即展示

data-remote 路径     如果配置了url,会将内容加载进modal-content中

modal模块也支持通过js代码来进行相关控制,支持的方法如下:



$('#open').on("click",function(){

   //展示模态框

   $('#myModal').modal('show');

});

$('#close').on("click",function(){

   //隐藏模态框

$('#myModal').modal('hide');

});

$('#exchange').on("click",function(){

   //显示或隐藏进行切换

$('#myModal').modal('toggle');

});

$('#setting').on("click",function(){

   //对模态框的属性进行设置 传入对象

$('#myModal').modal({

 keyboard:false

});

});

模态框也可以添加一些特有的事件回调,示例如下:


$('#myModal').on('show.bs.modal',function(e){

console.log("模态框将要展示触发")

});

$('#myModal').on('shown.bs.modal',function(e){

console.log("模态框已经展示后触发")

});

$('#myModal').on('hide.bs.modal',function(e){

console.log("模态框将要消失触发")

});

$('#myModal').on('hidden.bs.modal',function(e){

console.log("模态框已经消失后触发")

});

$('#myModal').on('loaded.bs.modal',function(e){

console.log("从远端数据源加载数据完成")

});

目录
相关文章
|
5月前
|
前端开发 API UED
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
141 2
|
4月前
|
缓存 前端开发 JavaScript
前端技术探索:构建高效、响应式Web应用的秘诀
前端技术探索:构建高效、响应式Web应用的秘诀
126 0
|
3月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
86 5
|
3月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
72 4
|
3月前
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
94 4
|
3月前
|
前端开发 JavaScript 数据处理
前端界的宝藏技术:掌握这些,让你的网页秒变交互神器!
【10月更文挑战第31天】前端开发藏有众多宝藏技术,如JavaScript异步编程和Web Components。异步编程通过Promise、async/await实现复杂的网络请求,提高代码可读性;Web Components则允许创建可重用、封装良好的自定义组件,提升代码复用性和独立性。此外,CSS动画、SVG绘图等技术也极大丰富了网页的视觉和交互体验。不断学习和实践,让网页秒变交互神器。
49 2
Bootstrap5 模态框3
通过添加不同的类,如 `.modal-fullscreen` 可实现模态框全屏显示,`.modal-fullscreen-*-*` 控制特定尺寸下的全屏显示,`.modal-dialog-centered` 实现模态框居中,以及 `.modal-dialog-scrollable` 使模态框内部内容可滚动。
|
4月前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
113 1
Bootstrap5 模态框2
通过在模态框的 `&lt;div&gt;` 元素中添加 `.fade` 类,可以实现模态框弹出和关闭时的淡入淡出动画效果。此外,通过添加 `.modal-sm`、`.modal-lg` 和 `.modal-xl` 类,可以调整模态框的大小,分别创建小、大和超大的模态框。
Bootstrap5 模态框1
Bootstrap5 模态框是一种覆盖在当前页面上的对话框,用于展示信息或进行用户交互。通过按钮触发,模态框包含标题、内容和底部操作区,实现页面内交互而不跳转。示例代码展示了如何使用 Bootstrap5 创建一个基本的模态框。

热门文章

最新文章

  • 1
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    docker安装nginx,前端项目运行
  • 5
    【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
  • 6
    《前端技术基础》第01章 HTML基础【合集】
  • 7
    详解智能编码在前端研发的创新应用
  • 8
    【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈