开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

执行函数时关闭Bootstrap Modal (使用Javascript而不是Jquery)

基础概念

Bootstrap Modal 是 Bootstrap 框架中的一个组件，用于创建模态框（弹出窗口）。模态框通常用于显示额外的信息、警告、确认对话框等，而不离开当前页面。

相关优势

响应式设计：Bootstrap Modal 自动适应不同的屏幕尺寸。
易于定制：可以通过 CSS 和 JavaScript 进行高度定制。
集成性：与 Bootstrap 的其他组件（如导航栏、按钮等）无缝集成。

类型

Bootstrap Modal 主要有以下几种类型：

默认模态框：基本的模态框，包含标题、内容和关闭按钮。
大模态框：用于显示更多内容。
小模态框：用于显示简短信息。
自定义模态框：根据需求自定义内容和样式。

应用场景

表单验证：在提交表单前显示验证错误信息。
警告和确认对话框：在执行某些操作前确认用户意图。
帮助和提示信息：提供额外的帮助信息或提示。

问题及解决方案

问题：执行函数时关闭 Bootstrap Modal

假设你已经有一个 Bootstrap Modal，并且希望在某个函数执行时关闭它。

解决方案

你可以使用纯 JavaScript 来关闭 Bootstrap Modal。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Close Bootstrap Modal with JavaScript</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Modal body text goes here.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

    <button onclick="closeModal()" class="btn btn-primary">Close Modal</button>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script>
        function closeModal() {
            var modal = document.getElementById('myModal');
            if (modal) {
                $(modal).modal('hide');
            }
        }
    </script>
</body>
</html>

解释

HTML 部分：定义了一个 Bootstrap Modal，ID 为 myModal。
JavaScript 部分：定义了一个 closeModal 函数，通过 jQuery 选择器找到模态框并调用 modal('hide') 方法来关闭它。

参考链接

通过这种方式，你可以在执行某个函数时关闭 Bootstrap Modal，而不需要依赖 jQuery。

相关搜索:使用jquery/javascript打开时填充Modal 获取TypeError (而不是函数) Jquery/Javascript 使用bootstrap 3 modal open调用bootbox会使bootstrap modal在bootbox关闭时失去焦点 Bootstrap Modal在使用Ipad按下按钮时关闭？如何在执行javascript时防止bootstrap模式关闭使用JavaScript/ jQuery从外部加载Bootstrap 4 Modal的内容 Bootstrap modal with angular。模式未使用特定的data-ng-click函数关闭在jQuery中，如何按顺序而不是同时执行函数？使用css而不是Javascript /Jquery在悬停时更改特色产品图像 JS仅在接近底部时执行函数，而不是在每个窗口滚动时执行函数 jquery click-function在页面加载时执行，而不是在单击时执行使用Javascript dom而不是jQuery元素选择器(没有jQuery)在JavaScript中使用toString()而不是构造函数当单击关闭输入而不是离开页面时，JQuery清除div 我想使用modal，但我一直得到$(...).modal不是一个函数。我已经按照正确的顺序使用了jquery和bootstrap js。如何使用GDB单步执行函数而不是其参数如何使用javascript onClick事件而不是链接调用jQuery colorbox？使用javascript而不是jquery在滚动上触发CSS动画在悬停时打开菜单，而不是使用jQuery单击如何在单击/提交提交按钮时执行第一个php函数而不是javascript函数

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Jump Start Bootstrap 第4章

您可以在任何组件中使用这个dropdown插件，将其注入前面代码中所示的内容。使用JavaScript下拉 Bootstrap的下拉插件也可以使用JavaScript完成。...Bootstrap使用JQuery库来完成全部和JavaScript相关的操作；因此，在Bootstrap中自定义JavaScript相关操作，导入JQuery.js是必须的。...在这里，请求是打开和关闭下拉菜单。让我展示一个如何使用这些事件的例子。我已经写了下面的JQuery代码片段去监听所有的下拉插件状态，并打印每个事件触发时的状态。 <!...Bootstrap通过类”close”将按钮放置在警告消息的右上角。关闭按钮的解除动作靠data-dismiss属性来触发，由Bootstrap使用JavaScript实现。...我们还学习了如何通过设置自定义data-*属性和通过JavaScript来定制它们。当使用Bootstrap时，您应该始终使用内置的插件，避免编写自定义插件。

28.3K4 0

Bootstrap 模态框（Modal）插件的基本应用

通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框： $('#identifier').modal(options...) 实例：注意：因为 Bootstrap.js 需要依赖 jquery 所以需要引入 jquery.js 文件测试代码如下：创建模态框...4、remote 类型是 path ，默认值：false ，data-remote 使用 jQuery .load 方法，为模态框的主体注入内容。...四、事件下面试模态框中用到的事件，这些事件可在函数中当钩子使用。 1、show.bs.modal 在调用 show 方法后触发。...$('#identifier').on('hide.bs.modal', function () { // 执行一些动作... }) 4、hidden.bs.modal 当模态框完全对用户隐藏时触发

4.4K0 0

Python测试开发-创建模态框及保存数据

，savedata函数用于模态框点击保存时触发保存数据。..."> 关闭 ...">关闭 </script

1.3K2 0

【应用】在线文件管理

下面主要介绍在更改界面时的遇到的一些问题。...Jquery-upload-file 进行文件上传的插件有很多，比如bootstrap-fileinput 和 jQuery-File-Upload，不过这里使用的是jquery-upload-file...Bootstrap 弹出框 bootstrap对弹出框进行了封装，使用起来十分方便，下面是一个使用示例：关闭 <button type="button" class="btn btn-primary...').<em>modal</em>(); } 有两种方式可以操作弹窗指定data-target属性 <em>使用</em><em>javascript</em>控制上面代码演示了这两种方式，

1.7K5 0

php 接口与前端数据交互实现示例代码

-- jQuery --> <script type="text/<em>javascript</em>" src="http://code.changer.hk/<em>jquery</em>/plugins/<em>jquery</em>.cookie.js...SQL语句检查语句是否<em>执行</em>正确，要<em>使用</em> Rest Client 测试URL请求是否正确； php: 前端实现JS部分： html<em>使用</em>了<em>bootstrap</em> 的 <em>modal</em>作为新增<em>时</em>的弹出框 <!...<em>而</em><em>不是</em>在 sucess 中实现？

1.9K2 0

最火的秒杀是如何实现的？

-- jQuery (necessary for Bootstrap's JavaScript plugins) --> '); $.post(seckill.URL.exposer(seckillId), {}, function (result) { //在回调函数种执行交互流程

1.5K3 0

「jQuery」基础 - 03

因为ul中的li是JS动态创建的，在页面加载时Docoment中并没有此元素，选择器并不能选取。...$(this).parent().slideUp(function() { // 当元素拉上去之后并不是真正的删除，而是隐藏了，这个时候执行回调函数，让元素真的删除...1.4.4. bootstrap组件 Bootstrap是 Twitter 公司设计的基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，他依靠jQuery实现，且支持响应式...Bootstrap组件使用非常方便：引入bootstrap相关css和js 去官网复制html 代码演示引入bootstrap相关css和js <link rel="stylesheet" href...1.7.5 案例：toDoList 删除操作点击里面的a链接，不是删除的li，而是删除本地存储对应的数据。

2.8K3 0

基于Metronic的Bootstrap开发框架经验总结（6）--对话框及提示框的处理和优化

1、Bootstrap对话框的使用常规的Bootstrap有几种尺寸的对话框，包括默认状态的小对话框，中等宽度的对话框，和全尺寸的对话框几种，Bootstrap的对话框界面非常友好，当我们使用ESC...Bootbox.js是一个小的JavaScript库，它帮助您在使用bootstrap框架的时候快速的创建一个对话框，也可以帮您创建，管理或删除任何所需的DOM元素或js事件处理程序。...2）sweetalert插件的使用虽然上面的效果非常符合Bootstrap的风格，不过界面略显单调。上面的效果不是我很喜欢这种风格，我遇到一个看起来更加美观的效果，如下所示。 ?...1）jNotify提示框的使用 jNotify提示框，一款优秀的jQuery结果提示框插件。...#000", // 设置遮罩层的颜色 OpacityOverlay : 0.3, // 设置遮罩层的透明度 onClosed:fn //关闭提示框后执行函数

5.2K5 0

Bootstrap学习文档（四）

建议使用压缩版的 JavaScript 文件bootstrap.js 和 bootstrap.min.js 都包含了所有插件，你在使用时，只需选择一个引入页面就可以了。... 建议使用压缩版的 JavaScript 文件bootstrap.js 和 bootstrap.min.js 都包含了所有插件，你在使用时，只需选择一个引入页面就可以了。... 包含的内容你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件，无需写一行 JavaScript... 建议使用压缩版的 JavaScript 文件bootstrap.js 和 bootstrap.min.js 都包含了所有插件，你在使用时，只需选择一个引入页面就可以了。... 动态实例你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件，无需写一行 JavaScript

3.7K2 0

使用不同的UI框架做出弹窗效果（实例）

应用场景：页面提交简短的信息效果预览： BootStrap实现 ? Layui实现 ? 好的，下面我们分别将代码简单的写一下 BootStrap代码：关闭 $("#btn").click(function(){ var...test = $("#test").val(); console.log("取到的数据是："+test); }) PS：可以直接复制使用 Layui

6503 0

Bootstrap框架

Bootstrap介绍 Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。它是为实现快速开发Web应用程序而设计的一套前端工具包。...为什么要使用Bootstrap？...├── bootstrap.min.js // 核心JS压缩文件 └── npm.js 注意：由于Bootstrap的某些组件依赖于jQuery，所以请确保下载对应版本的jQuery...通过 .fade类来控制模态框弹出时的动画效果（淡入淡出效果）。通过在 .modal-bodydiv中设置 .row可以使用Bootstrap的栅格系统。.../'static' true false表示有没有遮罩层，'static'表示点击遮罩层不关闭模态框 keyboard true/false true 键盘上的 esc 键被按下时关闭模态框。

3.9K7 0

javascript escape()和unescape()区别

JavaScript escape() 函数定义和用法 escape() 函数可对字符串进行编码，这样就可以在所有的计算机上读取该字符串。语法： escape(string) 例子： <script src="https://cdn.bootcss.com/<em>jquery</em>/3.4.1/<em>jquery</em>.min.js...=()#%&")) JavaScript unescape() 函数定义和用法 unescape() 函数可对通过 escape() 编码的字符串进行解码。..."> 关闭</button...escape对字符串进行编码，然后使用unescape() 函数对编码的字符串进行解码。

1.9K2 0

Flask 框架基础知识笔记

/jquery-3.4.1.min.js" type="text/javascript"> function...◆ before_request函数,就是一个装饰器,他可以把需要设置为钩子函数的代码放到视图函数执行之前执行. from flask import Flask,url_for,redirect,render_template.../4.3.1/css/bootstrap.min.css"> 关闭窗口

2.4K2 0

BootStrap应用开发学习入门1

$('#myalert').bind('close.bs.alert', function () { // 执行一些动作... }) closed.bs.alert #当警告框被关闭时触发该事件（将等待...查看 Bootstrap 当前支持的 jQuery 版本通过 data 属性 API 就能使用所有的 Bootstrap 插件，无需写一行 JavaScript 代码（首选方式），如果需要关闭请采用下列方式...$('#identifier').on('shown.bs.modal', function () { // 执行一些动作... }) hide.bs.modal 当调用 hide 实例方法时触发。...$('#identifier').on('hide.bs.modal', function () { // 执行一些动作... }) hidden.bs.modal 当模态框完全对用户隐藏时触发。...如果需要动态计算偏移，请使用函数。基础示例： <!

44.8K2 1

手撸的一个快递查询系统，竟然阅读量过1.8w

Jquery:一个轻量级的写的少，做的多的 JavaScript 函数库。 Bootstrap:Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。...Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。...最终在网上找到一种付费的方案，使用快递100接口。...html页面 html页面引入了jQuery和Bootstrap，jQuery已经过时了，但是使用起来还是很方便的。..." data-dismiss="modal">关闭 </div

1.5K4 0

BootStrap应用开发学习入门1

$('#myalert').bind('close.bs.alert', function () { // 执行一些动作... }) closed.bs.alert #当警告框被关闭时触发该事件（将等待...查看 Bootstrap 当前支持的 jQuery 版本通过 data 属性 API 就能使用所有的 Bootstrap 插件，无需写一行 JavaScript 代码（首选方式），如果需要关闭请采用下列方式...$('#identifier').on('shown.bs.modal', function () { // 执行一些动作... }) hide.bs.modal 当调用 hide 实例方法时触发。...$('#identifier').on('hide.bs.modal', function () { // 执行一些动作... }) hidden.bs.modal 当模态框完全对用户隐藏时触发。...如果需要动态计算偏移，请使用函数。基础示例： <!

44.3K3 0

前端成神之路-03_jQuery

对象的拷贝方法能够说出 jQuery 多库共存的2种方法能够使用 jQuery 插件 1.1. jQuery 事件注册 jQuery 为我们提供了方便的事件注册机制，是开发人员抑郁操作优缺点如下...jQuery 插件常用的网站： jQuery 插件库 http://www.jq22.com/ jQuery 之家 http://www.htmleaf.com/ jQuery 插件使用步骤：引入相关文件...1.4.4. bootstrap组件 Bootstrap是 Twitter 公司设计的基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，他依靠jQuery实现，且支持响应式...核心思路：不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据 // 3....1.7.5 案例：toDoList 删除操作 // 1.点击里面的a链接，不是删除的li，而是删除本地存储对应的数据。

3K2 0

python测试开发django-155.bootbox使用(alertconfirmpromptdialog)

前言 Bootbox.js是一个小型的JavaScript库，基于 Twitter 的 Bootstrap 开发，旨在使使用Bootstrap modals更容易！...可以自定义alert/confirm/prompt/dialog弹出框下载与使用 bootbox的所有版本都是在Bootstrap和jQuery的基础之上的，因此bootstrap，jQuery和bootbox...的版本要对应如果您使用的是Bootstrap 4，则还必须包含Popper.js。..." rel="stylesheet"> <script src...语言环境设置用于转换三个标准按钮标签：OK, CONFIRM, CANCEL buttons 类型: Object 按钮定义为JavaScript对象。

3K2 0

.net core版文件上传支持批量上传，拖拽以及预览，bootstrap fileinput上传文件

注意：这里的导包需要在终端导入【需要在wwwroot文件夹下执行nuget命令】如下图 ?...ViewData["Title"] = "Home Page"; Layout = null; } 基本上和asp.net mvc下边没有区别，只有一个地方需要特别注意一下，外部的script和css文件的引用文件需要放到wwwroot文件中，而不是项目的根目录下

2K4 0

【ASP.NET Core 基础知识】--MVC框架--Views和Razor语法

Razor中使用JavaScript库在Razor视图中引入和使用JavaScript库，例如，引入Bootstrap或其他前端库：使用JavaScript库的功能引入JavaScript库后，你可以在Razor视图中使用相应的库功能。...在Razor视图中使用JavaScript库时，确保在引入库文件后，按照库的文档说明使用相应的功能。这有助于保持代码的清晰和可维护性。...： @await Component.InvokeAsync("MyComponent") 延迟加载对于一些不是必需立即加载的内容，可以考虑使用 JavaScript 进行延迟加载。

4412 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭