关于bootstrap modal（添加，修改）模态框闪动一秒就不见了

最新推荐文章于 2024-07-14 12:56:18 发布
最新推荐文章于 2024-07-14 12:56:18 发布
阅读量628 收藏
点赞数 1
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/javaWithMe/blog/1941277
版权

我也遇到了关于添加模块框的闪动消失，现在问题解决了，

一般有两个地方可能出错

第一个是头部出错，重复添加js，因为在里面重复添加了bootstrap.js和bootstrap.min.js，把红色行其中的一行删除掉就可以了，

<head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">


  <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.js"></script>
   <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"></link></head>

第二种：如果<head>没有出错那么，在<button> 这里面加入type=“button”试试，只有button才能触发所添加的模态框

<button  class="btn btn-primary btn-lg" type="button" data-toggle="modal" data-target="#myModal">
    添加
</button>
  网上也有很多其他的解法，如果解决不掉也可以看下其他的

 以后我遇到其他的不懂得问题和解决方法我也会发到这个博客上来的

我也是初学者，希望大家共同进步。

转载于:https://my.oschina.net/javaWithMe/blog/1941277

chifanbin4728
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浅析BootStrap中Modal（模态框）使用心得
10-20
Bootstrap模态框（Modal）是前端开发中常用的一个组件，它允许在当前页面上弹出一个浮动窗口，用于展示额外的信息或进行交互操作，而无需跳转到新的页面。模态框是基于JQuery插件构建的，因此在使用前需要确保引入了...
Bootstrap模态框（Modal）实现过渡效果
08-31
Bootstrap 模态框（Modal）实现过渡效果 Bootstrap 模态框（Modal）是一种常用的_web_组件，用于在当前页面中弹出一个遮罩层，显示一些重要信息或进行一些操作。实现过渡效果是指在模态框（Modal）弹出和隐藏时，...
bootstrap-modal 模态框显示一下又消失问题解决以及模态框的基本使用方法
热门推荐
路漫漫其修远兮
08-23 1万+
一：问题场景 在开发中给button一个点击事件通过方法中的$('#id').modal('show')方式打开模态框，发现打开后模态框显示一下又消失了。 二：解决方法 经过查询大概有下面几种方式，我的问题相对好解决采用的是第4个方法解决 1、bootstrap.min.js与modal.js不能混用。 2、触发模态框的组件需要设置 data-toggle=“modal”   3、换一...
bootstrap modal 一闪
ayearlater的专栏
01-05 5476
原因可能是因为bootstrap.min.js（bootstrap.js） 和modal.js重复引用导致的，而且重复引用还会引致bootstrap的js事件失效。
bootstrap-modal 模态框一闪而过
qq_37260235的博客
10-23 3172
网上考证后，了解到有可能是 1.bootstrap.min.js与modal.js不能混用 2.换一个高版本的bootstrap.min.js 3.type=“button” 我是加入这个字段就可以触发了， &lt;button class="btn btn-primary btn-sm" type="button" onclick="javascript:$('#...
js+jq ---点击登录按钮模态框一闪而过！！
qq_49445069的博客
08-22 347
点击登录按钮模态框一闪而过！！ < a class=“login-btn” href="" >立即登录< a > 和 < a class=“login-btn” >立即登录< a > 如果你的登录按钮使用的是a标签,如上，会出现一闪而过，此时需要将href属性去掉即可解决一闪而过！ ...
bootstrap模态框瞬间消失解决
hotqin888的专栏
05-01 1万+
bootstrap模态框挺好，但这方面的例子很少，都是官方的代码，网上没有一点新的东西。 比如，save changes，即点击确认后如何处理？没有例子。只有取消close的功能。 我的需求是这样，点击一个链接，传一个id，打开模态框，进行输入、单选、列表选择等，点模态框确认，然后连同刚才的id、模态框中的各种值，一起提交到后台处理。 第一个：用连接传id并打开模态框。 添加同级 {
Bootstrap自定义模态框，自动消失
uj
05-01 7776
Bootstrap自定义模态框，自动消失 引入css 、jQuery、 font-awesome 调整模态框的 css setTimeout 定时关闭 去掉遮罩层 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试</title> <link rel="styles
Bootstrap 模态框（Modal）带参数传值实例
08-29
Bootstrap模态框（Modal）是Web开发中常用的一种交互元素，它允许用户在不离开当前页面的情况下处理额外信息或执行操作。在实际应用中，我们经常需要将数据从父页面传递到模态框中，以确保操作的针对性和准确性。本...
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
08-31
本文将深入探讨如何扩展Bootstrap的Modal模态框，实现动态添加和弹出多个Modal框。 首先，我们需要理解Bootstrap Modal的基本结构。一个基本的Modal由三部分组成：`<div class="modal">`（模态对话框）、`.modal-...
Bootstrap 过渡效果Transition 模态框（Modal）
08-31
使用 data 属性可以非常方便地创建一个模态框，只需要在按钮或链接上添加 data-toggle="modal" 和 data-target="#identifier" 属性，就可以触发模态框的显示。 使用 JavaScript 使用 JavaScript 可以更多地控制...
BootStrap弹出框实现自动关闭（延时）
小绵杨
11-22 6443
需求 最近使用bootstrap时，需要一个弹窗提示用户登录失败。bootstrap提供了alert组件来满足弹窗提示的功能，但是没有自动关闭功能，只提供了一个可以通过点击’ x '号关闭的弹窗。详情：bootstrap警告框。 这样对用户并不太友好，例如elementui中的弹框，显示一段时间后自动消失。起到了提示作用即可。 实现 利用window.setTimeout 延时一定时间后，再关闭弹框。 为弹框添加’ hide ‘类，即默认隐藏。当需要显示时，再添加’ show ‘类，显示弹框。延时一段时间
bootstrap 模态框弹出就消失了_bootstrap模态框消失问题的解决方法
weixin_32639437的博客
01-26 963
这篇文章主要为大家详细整理了bootstrap模态框消失不消失各种问题的解决方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下小编主要从网上整理了网友提出来的关于bootstrap模态框消失的不同问题，希望对大家有帮助。状况一：bootstrap模态框瞬间消失解决bootstrap模态框挺好，但这方面的例子很少，都是官方的代码，网上没有一点新的东西。比如，save changes，即点击确认后...
BootStrap模态框闪退
zhuyuchao11的博客
11-18 5827
解决方法： 1、bootstrap.min.js与modal.js不能混用。 2、触发模态框的组件需要设置 data-toggle=“modal”   3、设置 data-target="#myModal"或href="#myModal"或者写javascript 函数响应点击事件打开模态框，不能同时使用 4、换一个高版本的bootstrap.min.js
antd modal 打开会闪一下，针对确实多次渲染的问题
赵乘风_i
04-12 5274
需求背景 在最近的项目中，遇到一个比较复杂的场景，点击触发后会打开modal弹框，但是因为情况比较多，总共有3种方式都可以打开modal框，所以在父组件的处理就比较复杂，涉及到了多次渲染，就导致modal框在打开的时候，会闪一下。 我也知道，处理好多次渲染的问题，modal框应该在打开的时候就不会闪了，但是，因为需求场景比较复杂，如果要处理多次渲染，那就会导致modal框打开后的各种问题，所以不能修改 解决 在仔细看了官网的api后，发现一个属性， maskTransitionName 其实就是将Modal
html5 modal 显示,boostrap modal 闪现问题的解决方法
weixin_31061573的博客
06-24 338
此处闪现场景是，修改和新增用的一个js方法，最终都调用$('#modalrowedit').modal('show'); 新增使用的是button，修改使用的a标签。修改标签：修改// jsfunction editrow(obj) {var coldata = datatable1.row(obj.parentnode.parentnode).data();// $('#modalrowedit...
view使用Modal时出现闪关
weixin_50166856的博客
07-29 1049
当出现错误情况的时候本来要弹出这个弹窗，结果一闪而过，后面加上了定时器就没有问题了 let timer=null clearTimeout(timer) timer=setTimeout(()=>{ this.$Modal.warning({ 'title': '遇到了问题', 'content': res.data instanceof Array ? res.data.join('<br/&
Sortable.js板块拖拽示例
最新发布
w11111xxxl的博客
07-14 779
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
hidden.bs.modal 获取bootstrap 模态框里的值
05-27
要获取 Bootstrap 模态框里的值，可以使用 jQuery 的 `.find()` 方法找到模态框中的元素，然后获取其值。例如，假设你的模态框中有一个表单，其中有一个输入框的 id 为 `input1`，你可以通过以下代码获取该输入框的值： ```javascript var modal = $('#myModal'); // 获取模态框元素 var inputVal = modal.find('#input1').val(); // 获取输入框的值 ``` 需要注意的是，上述代码只有在模态框已经完全加载并显示出来后才能生效，因此最好在模态框的 `shown.bs.modal` 事件中执行该代码，例如： ```javascript $('#myModal').on('shown.bs.modal', function () { var inputVal = $(this).find('#input1').val(); // 获取输入框的值 console.log(inputVal); }); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值