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

已于 2022-03-16 14:32:19 修改
阅读量2.5k 收藏 3
点赞数 2
分类专栏： web前端 文章标签： 前端 bootstrap
于 2022-03-07 13:23:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/skyblue_afan/article/details/123328137
版权

1、显示

//identifier为模态框的id
$('#identifier').modal('show');

2、隐藏

//identifier为模态框的id
$('#identifier').modal('hide');

3、点击模态框以外的背景模态框不关闭

//点击模态框以外的背景模态框不关闭
data-backdrop="static";

4、点击esc模态框不关闭

//点击esc模态框不关闭
data-keyboard="false";
skyblue_afan
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
2.BootStrap的Modal模态框出现与隐藏
duhasohfsig的博客
12-22 842
1.在需要弹出模态框的html的body里固定一个框架 <!-- 弹出窗口 --> <div class="modal fade" id="addWaitArchivesDlg"> <div class="modal-dialog"> <div class="modal-content"></div> </div> </div> 2.在添加按钮上定义一个点击事件，点击后弹出模态框，url的地址引用是模态框
Modal的显示与隐藏
weixin_41548578的博客
01-19 1806
核心思想 页面完成加载后，为所有含有data-toggle="modal"的元素绑定点击事件 模态框出现的逻辑：先出现遮罩层，再出现模态框 为body增加"modal-open"类，作用是给body增加overflow：hidden隐藏页面的滚动条。给模态框增加overflow-x:hidden;overflow-y:auto美化样式 调用dropback函数，变量shown为true，所以插入...
js代码控制bootstrap的模态框(modal)
最新发布
autumngold的专栏
05-23 468
在Bootstrap 5中，模态框（Modal）是一个自定义的HTML元素，可以用于创建对话框。通过导入Bootstrap的JavaScript模块，可以使用其API来控制模态框的显示和隐藏。以下是一个简单的示例说明如何使用Bootstrap 5中的模态框。如果你的模态框需要在某个特定的动作或事件之后显示，可以将 myModal.show() 放入该事件的处理函数中。同样的，当你需要隐藏模态框时，可以调用 myModal.hide()。以上是Bootstrap 5模态框显示和隐藏的基本实现方式。
使用JS显示/隐藏bootstrap的modal
weixin_41580398的博客
07-17 393
使用JS显示隐藏bootstrap的modal
模态框的拖动
DF_jie的博客
11-19 326
模态框的拖动 效果：当我们点击模态框的时候，使用鼠标滑动，模态框跟着移动。 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>模态框的拖动</title> <style> //写出简单的CSS样式 随意即可 .login-header { width: 10
Bootstrap模态框(modal)显示、隐藏与禁用ESC代码实现
BADAO_LIUMANG_QIZHI的博客
04-03 5370
场景 对于弹出框bootstrap就有模态框(modal)。 有时显示模态框，按键盘上ESC就会关闭模态框，所以在打开模态框时设置其属性。 实现 modal显示： $("#apAddAndEidtModel").modal('show'); modal隐藏： $("#apAddAndEidtModel").modal('hide'); modal禁用Esc: $("#ap...
BootStrap 模态框实现刷新网页并关闭功能
08-31
本篇文章将详细介绍如何利用Bootstrap模态框实现刷新网页并关闭的功能，以及如何禁用空白处点击关闭模态框。 首先，我们需要了解Bootstrap模态框的事件绑定机制。Bootstrap提供了多种与模态框相关的事件，包括`show...
Bootstrap模态框（Modal）实现过渡效果
08-31
在 Bootstrap 中，模态框（Modal）是通过 CSS 和 JavaScript 实现的。模态框（Modal）的 HTML 结构通常如下所示： ```html × <h4 class="modal-title" id="myModalLabel"> 模态框（Modal）标题 在...
Bootstrap模态框使用详解
08-31
Bootstrap模态框（Modal）是Bootstrap框架中一个非常实用的组件，它允许在不离开当前页面的情况下显示额外信息或执行操作。模态框通常用于显示警告、确认对话框或者进行表单输入等场景。以下是对Bootstrap模态框的...
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
12-01
引入文件 <link rel="stylesheet" href="bootstrap.min.css" rel="external nofollow" > <link rel="stylesheet" href="style.css" rel="external nofollow" > [removed][removed] [removed][removed] 点击‘显示’按钮 $('#modalID').click(function () { $('#newNotice').
bootstrap模态框示例代码分享
08-30
除了HTML结构，Bootstrap模态框还可以通过JavaScript API进行更复杂的控制，例如`$('#myModal').modal('show')`显示模态框，`$('#myModal').modal('hide')`隐藏模态框。 8. **自定义样式**： 通过添加自定义CSS，...
Bootstrap框架-弹框，属性控制与js控制（基础）
m0_59745705的博客
11-12 418
保存
模态框隐藏注册事件
repik_3的博客
09-29 199
@TOC模态框隐藏注册事件 $(document).read(function(){ //1.获得编辑的模态框,并添加点击时间给提交按钮 $("#modal-dialog") .on("click",".ok",doSaveOrUpdate); //2.在模态框隐藏后移除ok上注册的时间，防止数据多次提交 $("#modal-dialog") .on("hidden.bs.modal"...
Bootstrap弹出层Modal模态框的显示与隐藏控制属性
qq_44165157的博客
07-22 1132
//Readonly - 仅弹窗输入框无法输入，直接加在input。 $('#myModal').modal('show') //显示 $('#myModal').modal('hide')//隐藏 //重复点击的隐藏显示有一个很更方便的写法 $('#myModal').modal('toggle')
bootstrap使用Modal,关闭弹框遗留遮罩层
阳光girl
08-30 3740
前两天，用公司封装的框架，写了一个弹框，两个弹框操作相隔时间很短，第二个弹框出现遮罩层。 // 手动清除 $(".modal-backdrop").remove(); 发现弹框关闭后滚动条不好使。然后f12查看，发现modal-open未关闭，之后再执行 $("body").removeClass('modal-open'); 问题就可以解决了。 不过，这种方法虽然简单，但是总觉得有点...
javascript:利用事件的阻止冒泡实现模态框的隐藏功能
jiangcs520的专栏
01-23 1599
很多时候，我们做前端的时候都会有这样的小功能，点击弹出某个框框，但是，有时候不想操作，就想点击某个空白处，隐藏该框框。假设如下场景，一个小按钮，点击可以弹出一个模态框。 就这么简单，但是我们想要点击空白部分的时候隐藏模态框，加入按钮id：btn，模态框id：model 也许我们最简单的思路就是直接在document上监听一个事件，伪代码如下： 按钮点击弹出事件监听： $("#btn").b
Bootstrap模态框事件监听
gonyulian415的专栏
12-30 2155
[size=medium][color=darkred]show.bs.modal [/color] show 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的relatedTarget 属性进行访问。 [color=darkred]shown.bs.modal [/color] 此事件在模态框已经显示出来（并且同时在 CS...
bootstrap模态框封装
07-28
对于Bootstrap模态框的封装，你可以按照以下步骤进行操作： 1. 引入Bootstrap库：在你的HTML文件中，确保你已经引入了Bootstrap的CSS和JavaScript文件。可以使用CDN链接或者本地文件。 2. 创建模态框的HTML结构：在HTML文件中添加一个用于模态框的容器元素，例如一个`<div>`元素。给这个元素添加一个唯一的ID，以便在后续的操作中引用它。 3. 触发模态框的按钮或链接：在页面中添加一个触发模态框的按钮或链接。给这个按钮或链接添加一个`data-toggle`属性，并将其值设置为`modal`。然后，将`data-target`属性设置为步骤2中创建的模态框容器元素的ID。 4. 内容填充：在模态框容器元素中添加模态框的内容。这可以是文本、表单、图像等等。根据你的需求进行相应的布局和样式设置。 5. JavaScript交互：为了使模态框能够正常工作，你需要添加一些JavaScript代码。使用jQuery或者原生JavaScript来实现以下功能： - 当点击触发按钮时，显示模态框； - 当点击模态框外部区域或关闭按钮时，隐藏模态框； - 可以通过编写事件处理程序来处理模态框上的表单提交、按钮点击等交互操作。 以下是一个简单的示例代码，演示了如何封装Bootstrap模态框： ```html <!-- 步骤2：模态框的容器元素 --> <div id="myModal" class="modal"> <!-- 步骤4：模态框的内容 --> <div class="modal-content"> <span class="close">×</span> <h2>模态框标题</h2> <p>模态框内容</p> </div> </div> <!-- 步骤3：触发模态框的按钮 --> <button type="button" data-toggle="modal" data-target="#myModal">打开模态框</button> <!-- 步骤5：JavaScript交互 --> <script> // 当点击触发按钮时，显示模态框 $('[data-toggle="modal"]').on('click', function() { $('#myModal').show(); }); // 当点击关闭按钮或模态框外部区域时，隐藏模态框 $('.close, .modal').on('click', function() { $('#myModal').hide(); }); </script> ``` 以上是一个基本的封装示例，你可以根据你的实际需求进行修改和扩展。希望对你有帮助！如有更多问题，请继续提问。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值