当前位置: 首页 > article >正文

记录offcanvas不能显示和关闭的修复方法

offcanvas 是 bootstrap 提供的对话框(模态框)。在项目中使用了bootstrap 提供的对话框 功能显示数据。使用过程中发现一个奇怪的问题:

1. 如果在HTML中没有在对话框的class中设置show,通过jquery的show方法不能显示对话框;2. 如果在class中设置了show,则在显示主页面的同时也会显示对话框。试着通过JS在显示页面时就关闭对话框, 通过jquery的hide()还关闭不了,通过bootstrap.getinstance()方法获取实例,然后通过实例的hide()方法虽然能够关闭对话框,但是会看到对话框闪现,而且主页面变灰,需要按下鼠标才能恢复正常。这种方法使用体验也很差。

经过多次尝试,最终找到了解决办法:

1. 在HTML中在对话框的class中不设置show,因此打开主页面时不会显示对话框;

2.在需要显示对话框时,通过jquery的addClass('show')增加show class;

3.在对话框上增加关闭按钮,在关闭按钮的click响应事件中通过jquery的hide()方法关闭对话框。


http://www.kler.cn/a/385247.html

相关文章:

  • 【Linux系统】—— 基本指令(二)
  • esp32学习:利用虫洞ESP32开发板,快速实现无线图传
  • printf影响单片机中断速度
  • A019基于SpringBoot的校园闲置物品交易系统
  • 测试-正交表与工具pairs的介绍使用(1)
  • HAL库硬件IIC驱动气压传感器BMP180
  • QT监控文件夹变化(文件增加、删除、改名)
  • B2C分销管理系统(源码+文档+部署+讲解)
  • C++20 STL CookBook 4:使用range在容器中创建view
  • c# 动态lambda实现二级过滤(多种参数类型)
  • 『VUE』21. 组件注册(详细图文注释)
  • Kubernetes时代的APM部署革新:基于Webhook的Agent动态注入
  • docker镜像文件导出导入
  • GPU服务器厂家:AI 赋能科学研究的创新突破
  • 1.每日SQL----2024/11/7
  • 计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-30
  • 为什么人工智能增强的威胁和法律不确定性成为风险主管最关心的问题
  • 5G智能对讲终端|北斗有源终端|北斗手持机|单兵|单北斗
  • Java | Leetcode Java题解之第543题二叉树的直径
  • 关于遥感影像BIL、BIP、BSQ你知道多少?给一个二进制文件你会读取嘛~
  • uniapp使用腾讯即时通讯IM(复制即可使用)
  • 小白初入Android_studio所遇到的坑以及怎么解决
  • Java I/O流面试之道
  • 【JavaScript】网络请求之Promise fetch Axios及异步处理
  • C++【string类,模拟实现string类】
  • [zotero]Ubuntu搭建WebDAV网盘