使用JS显示/隐藏bootstrap的modal

colo姜

已于 2023-07-17 23:18:15 修改

阅读量539

点赞数

文章标签： javascript bootstrap 前端

于 2023-07-17 23:17:32 首次发布

本文链接：https://blog.csdn.net/weixin_41580398/article/details/131777069

版权

这篇文章介绍了如何不依赖jQuery（JQ）而是使用纯JavaScript来创建和控制Bootstrap的Modal对话框。通过选取特定的DOM元素如.add-modal，实例化新的Modal对象并调用show()和hide()方法来显示和隐藏模态框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官网和网上大多数都是使用JQ实现，写一个纯JS的

// addModalDom 是目标modal
const addModalDom = document.querySelector('.add-modal')
const addModal = new bootstrap.Modal(addModalDom)
addModal.show()
addModal.hide()

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

colo姜

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

2.BootStrap的Modal模态框出现与隐藏

duhasohfsig的博客

12-22

932

1.在需要弹出模态框的html的body里固定一个框架  <div class="modal fade" id="addWaitArchivesDlg"> <div class="modal-dialog"> <div class="modal-content"></div> </div> </div> 2.在添加按钮上定义一个点击事件，点击后弹出模态框，url的地址引用是模态框

js代码控制bootstrap的模态框(modal)

autumngold的专栏

05-23

1792

在Bootstrap 5中，模态框（Modal）是一个自定义的HTML元素，可以用于创建对话框。通过导入Bootstrap的JavaScript模块，可以使用其API来控制模态框的显示和隐藏。以下是一个简单的示例说明如何使用Bootstrap 5中的模态框。如果你的模态框需要在某个特定的动作或事件之后显示，可以将 myModal.show() 放入该事件的处理函数中。同样的，当你需要隐藏模态框时，可以调用 myModal.hide()。以上是Bootstrap 5模态框显示和隐藏的基本实现方式。

1 条评论您还未登录，请先登录后发表或查看评论

bootstrap模态框通过js控制显示隐藏(学习篇)

skyblue_afan的博客

03-07

2820

boostrap模态框

bootstrap如何用js调用模态框_Bootstrap打开模态框通过js的方式

weixin_29291185的博客

01-17

2025

要注意一点就是加载的js的问题要和jquery搭配否则会出现modal找不到的问题那么打开模态框很简单修改调用一个方法，方法里面，可以去ajax得到数据json对象然后给表单赋值function LoadModify(id) {$.ajax({type: "GET",url: "/cccc/modify/" + id,dataType: "json",beforeSend: functio...

js 点击显示模态框data-toggle=“modal“ data-target

韩梦飞沙_韩亚飞

02-22

1218

显示 $('#modal_id').modal('show') 隐藏 $('#modal_id').modal('hide') 参见文档： Bootstrap 模态框（Modal）插件 | 菜鸟教程

Modal的显示与隐藏

weixin_41548578的博客

01-19

1900

核心思想页面完成加载后，为所有含有data-toggle="modal"的元素绑定点击事件模态框出现的逻辑：先出现遮罩层，再出现模态框为body增加"modal-open"类，作用是给body增加overflow：hidden隐藏页面的滚动条。给模态框增加overflow-x:hidden;overflow-y:auto美化样式调用dropback函数，变量shown为true，所以插入...

Bootstrap modal使用及点击外部不消失的解决方法

08-31

如果你想要通过 JavaScript 来控制 Modal 的显示和隐藏，可以使用以下方法： ```javascript // 显示 Modal $('#myModal').modal('show'); // 隐藏 Modal $('#myModal').modal('hide'); // 切换 Modal 的显示状态...

vue3-bootstrap5-modal:使用Bootstrap 5的简单vue 3模态组件

04-04

＃vue3-bootstrap-5-modal-component使用引导程序5的vue 3的简单模态组件依存关系：该组件需要安装Bootstrap 5和Popper npm install bootstrap@next npm install @popperjs/core 然后可以将它们包含在main.js...

Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案

08-31

例如，可以创建一个新的变量来跟踪当前活动的模态，或者使用事件冒泡机制来处理嵌套模态的显示和隐藏。此外，考虑使用类（class）而不是 ID 来绑定事件，这样可以避免因 ID 重复而引发的问题。在处理模态的显示和...

BootStrap modal模态弹窗使用小结

09-01

- 通过JavaScript，可以使用`$("#modal").modal({ backdrop: "static", keyboard: false, show: false })`来设置模态属性，如静态背景、禁用键盘关闭和初始化时不显示。 Bootstrap模态弹窗的灵活性和易用性使其...

Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题

08-31

在使用Bootstrap框架构建网页时，有时我们需要实现多个Modal弹窗的叠加展示，这在处理复杂的交互场景时非常常见。然而，这种多模态对话框的使用可能会引发一系列问题，其中包括滚动条遮罩阴影问题。当多个Modal弹窗...

Bootstrap模态框(modal)显示、隐藏与禁用ESC代码实现

BADAO_LIUMANG_QIZHI的博客

04-03

5608

场景对于弹出框bootstrap就有模态框(modal)。有时显示模态框，按键盘上ESC就会关闭模态框，所以在打开模态框时设置其属性。实现 modal显示： $("#apAddAndEidtModel").modal('show'); modal隐藏： $("#apAddAndEidtModel").modal('hide'); modal禁用Esc: $("#ap...

Bootstrap 弹框：JS控制显示与隐藏

最新发布

听海边涛声

07-11

551

Bootstrap 弹框：JS控制显示与隐藏

Bootstrap弹出层Modal模态框的显示与隐藏控制属性

qq_44165157的博客

07-22

1232

//Readonly - 仅弹窗输入框无法输入，直接加在input。 $('#myModal').modal('show') //显示 $('#myModal').modal('hide')//隐藏 //重复点击的隐藏显示有一个很更方便的写法 $('#myModal').modal('toggle')

Bootstrap modal 水平居中、左/右侧弹出、隐藏时监听、select2被modal覆盖

cocosum

09-17

1976

1、下面是，modal在屏幕正中间显示 let _modal = $('#userModal'); _modal.on('show.bs.modal', function(){ var $this = $(this); var $modal_dialog = $this.find('.modal-dialog'); $this.css('display', ...

在vue 中使用bootstrap5的modal

qq_38360823的博客

06-08

2811

vue 使用 bootstrap modal

深入浅出bootstrap模态框modal.js

前端啤酒屋

04-29

1656

本篇博客参考https://v3.bootcss.com/javascript/#modals-examples 先上bootstrap官网瞅一眼: https://www.bootcss.com/ 开宗明义的提出了模态框不支持同时打开多个，想同时打开多个看来需要另寻高明了，我bootstrap做不到。不支持同时打开多个模态框千万不要在一个模态框上重叠另一个模态框。要想同时支持多个...

bootstrap中的Modal

qq_45701634的博客

07-27

355

<html> <head> <meta name="viewport" content="width=device-width" /> <title>Modial</title> <link href="~/Content/picker/sample in bootstrap v2/bootstrap/css/bootstrap.min.css" rel="stylesheet" /> <scri.