html模态框常见问题,模态框无法弹出的问题

article/2025/8/18 2:33:09

问题起因:

昨晚写到了一个模态框,用到了bootstrap和jquery,依赖的js已经复制到项目中,并在Jsp页面上进行了引用,最初的引用如下:

问题描述:

模态框无法正常弹出,使用浏览器查看资源看不到引用的Jquery,bootstrap也因没有Js基础而报错。使用外部链接Jquery没有问题,模态框正常弹出。

问题详细:

运行tomcat之后在chrome测试发现模态框无法正常弹出,进行检查发现错误如下:

/*!

* Bootstrap v3.3.7 (http://getbootstrap.com)

* Copyright 2011-2016 Twitter, Inc.

* Licensed under the MIT license*/

if("undefined"==typeof jQuery)throw new Error("Bootstrap‘s JavaScript requires jQuery");//省略。。。

报错原因:Bootstrap 需要jQuery支持

检查引用顺序,jQuery确实在bootstrap之前,问题并不出在这里。。。

检查文件资源以及源码

439e0182c788c997fbad21e2e6b547fb.png

使用${pageContext.request.contextPath }引用bootstrap正常而jQuery不正常

怀疑1:bootstrap与jQuery版本不符

但bootstrap3最低能够兼容到jQuery1.9.X,将本地连接换成相同版本的web链接

模态框成功弹出,检查chrome资源

18fbe70f9c1ae544a202e2ee1d2e3542.png

怀疑2:本地jQuery资源问题

更换了相同和不同版本的jQuery均无法加载。。

尝试清理项目,重启服务器也无效。。。

今天一早起来继续修改,尝试将引用改为

String basePath= request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>

运行检查如下:

9588bc853042db99ad28931f55fe5622.png

模态框正常弹出,js加载正常,问题解决!

问题后续:

尝试恢复昨晚的写法,却无论如何都没有问题

检查发现先jQuery正常加载,bootstrap依赖正常,如图:

439e0182c788c997fbad21e2e6b547fb.png

???????????????????????????????????????????????????????????????????????????

理解不能

如果你发现了类似错误,请不要着急,希望这篇文章可以帮到你。

原文:https://www.cnblogs.com/YFEYI/p/12371412.html


http://chatgpt.dhexx.cn/article/cjdPK7oA.shtml

相关文章

Vue模态框的封装

一、模态框 1、模态框:若对话框不关闭,不能操作其父窗口 2、非模态框:对话框不关闭,可以操作其窗口 二、Vue组件实现模态框的功能 1、模态框是一个子组件 2、显示和隐藏由父组件决定 3、对话框的标题也是由父组件传递的 4、对话框…

Bootstrap之模态框

前言 模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 用法 您可以切换模态框(Modal)插件的隐藏内…

php什么是模态框,bootstrap模态框有什么用

Bootstrap Modals(模态框)是使用定制的Jquery 插件创建的。 它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能。您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件)。(推荐学习:Bootstrap视频教程) 将通过一些实例和解释…

弹出模态框

想必大家都知道弹出层的重要性,在很多的地方都能用到这个方法,所以说这种是非常的普遍的实用性,在大家编写过程中也是很常见的模态框以及弹出层,基本也是一个概念。 插件不可缺少 1.多窗口模式 层叠置顶 Esc 关闭 为什么是说多窗…

模态框动态赋值

模态框动态赋值,可以有多种方式:1、每次一个个填充;2、直接针对模态框中的ID赋值。。。 今天说下同事犯的错误,大家引以为鉴: 首先如图: 他在点击详情链接时,是能拿到相关参数的,进…

html 自定义模态框,自定义对话框、模态框

致敬iphoneX的小刘海....自定义模态框 body{ text-align: center; } #modalBg{ position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,0.2); width: 100%; height: 100%; margin: auto; display: none; } #modal{ min-width: 30%; background-color: white; bor…

html怎么自动弹出模态框,纯CSS实现带点击模态框外部自动关闭的模态框

在网页中我们经常会用到模态框,一般会用于显示表单或者是提示信息。由于模态框涉及到页面上比较多的交互效果,最简单的交互就是打开以及关闭两个操作,而关闭又会涉及是否需要在打开状态下点击模态框外部能够关闭这样的功能,因为这些交互问题,所以一般都会首先考虑到使用Ja…

模态框拖拽

1、点击弹出层,回弹出模态框,并且显示半透明的遮挡层 2、点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层 3、鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动 4、鼠标松开,可…

模态框案例

模态框 模态框在很多网站是很常见的&#xff0c;比如网易云音乐登录&#xff0c;百度登录等网站。 网易云音乐如图&#xff1a; 让我们来看看代码吧&#xff01;&#xff01;注意&#xff1a;这里为了更好的演示效果&#xff0c;增加了遮挡层。 HTML部分&#xff1a; <!-- …

零基础Bootstrap入门教程(16)--模态框

点此查看 所有教程、项目、源码导航 本文目录 1. 概述2. 模态框样式3. 按钮直接关联模态框4. 通过JS方法打开/关闭模态框5. 调整大小6. 动画效果7. 小结 1. 概述 模态框这个名字有点高雅了&#xff0c;其实就是对话框&#xff0c;用来弹出一个新的界面。 模态框的使用非常的场…

模态框

模态对话框&#xff08;Modal Dialogue Box&#xff0c;又叫做模式对话框&#xff09;&#xff0c;是指在用户想要对对话框以外的应用程序进行操作时&#xff0c;必须首先对该对话框进行响应 摘自百度百科 先放上效果图&#xff1a; 基本功能为点击窗口中间的发光按钮&#xff…

HTML+CSS+JavaScript实现模态框(可拖拽)

前言 模态框是指覆盖在父窗口上的子窗口&#xff0c;但在HTML网页中&#xff0c;并没有父窗口和子窗口的概念。这里是通过可隐藏的遮罩层和一个可隐藏的盒子来实现模态框的效果。 效果演示&#xff1a; 下面开始详细介绍如何实现一个可拖拽的模态框。只对 JS 部分详解&#x…

Bootstrap系列之模态框(Modal)

文章の目录 1、工作原理2、示例2.1、Modal组件2.2、在线演示2.3、静态背景2.4、滚动内容2.5、垂直居中2.6、提示和弹窗2.7、使用网格2.8、不同模态框的内容2.9、改变动画2.10、移除动画2.11、动态高度2.12、Accessibility2.13、嵌入YouTube视频 3、Optional sizes4、用法4.1、通…

Oracle数据迁移

本文主要提及使用exp,imp以及Oracle数据泵等工具如何进行数据迁移&#xff1a; 一、数据迁移工具 1、数据迁移工具 &#xff08;1&#xff09;数据泵 &#xff08;2&#xff09;外部表&#xff1a;external table &#xff08;3&#xff09;数据加载工具&#xff1a;sqllo…

MySQL数据库- 几种数据迁移的方法详解都在这了!看完必懂

数据迁移的几种方式 - MySQL数据库 本文关键字&#xff1a;MySQL、数据库、数据迁移、导入、导出 文章目录 数据迁移的几种方式 - MySQL数据库 一、数据迁移 1. 数据的生命周期2. 数据迁移的发生二、数据导出 1. 命令方式2. 软件方式三、数据导入 1. 命令方式2. 软件方式四、…

数据迁移方法

在我的《高并发系统设计目标之可扩展性》博文中提到&#xff0c;随着业务的发展&#xff0c;我们会沿着AKF的Y轴进行微服务化的改造。但是沿着Y轴的重构过程中往往涉及到分库分表。那么这时就需要进行数据库的迁移了。沿着AKF的Z轴也类似&#xff0c;那么迁移有什么原则呢&…

如何高效地进行大规模数据迁移?

导读 我们在做一次系统业务模型重构的时候&#xff0c;往往会遇到把旧模型表中的数据迁移到新模型表中&#xff0c;如果这时候&#xff0c;我们旧表中的数据规模已达到千万级以上&#xff0c;那么&#xff0c;这个从旧表迁移到新表的过程会非常漫长&#xff0c;而业务仍需快速推…

电脑数据怎么迁移?

“最近我的电脑越来越卡&#xff0c;运行程序时还会出现卡死奔溃的现象&#xff0c;陪伴我多年的电脑到了退休的时候了。购买了一台新款的笔记本电脑&#xff0c;打开软件运行多么的流畅&#xff0c;别提多高兴了&#xff01;可是&#xff0c;我想把旧电脑的数据导入到新电脑怎…

数据库整体迁移

1.迁移方法概述: 使用Navicat Premium 分别与源数据库和目标数据库建立连接,然后借助Navicat Premium自带的数据传输功能,实现Oracle数据库的迁移.其实跟从MySQL数据库迁移到oracle数据库是一个套路. O(∩_∩)O~ 听起来,是不是很简单,其实就是很简单!下边我就讲一下具体实现的细…

数据库迁移的方法

数据库迁移的方法 我们今天以mysql为例&#xff0c;讲讲数据库迁移的四种方法。 1、将数据库倒出为sql文件&#xff0c;再重新导入&#xff08;推荐&#xff09;。 首先将mysql数据库锁定&#xff0c;并将内存中的数据写入磁盘。 flush tables with read lock ; 用mysqldump将t…