bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法


Posted in Javascript onNovember 30, 2020

这是最近在做个人播客系统出现的一个问题,

场景如下 :

bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法

图中我点击删除按钮之后, 弹出一个模态框让我选择是回首页还是, 上一页, 下一页

首页没什么好说的了, 就是直接跳转, 没什么问题

上一页, 下一页却是跳转到上一篇 或者下一篇, 所有的”文章“都是用的是同一个html模板, 所以页面没有重新加载
于是就出现了 上面的问题, 模态框消失了, 但是背景却没有消失

对于这个问题, 我在网上找了好一阵子, 但是貌似并没有相关的问题

1 所以之前我本来是想将这个问题简单化, 直接"location = prevUrl; location.reload() ", 但是 这样有感觉不合适, 请求两次, 对于某些某些没有缓存的数据 是比较浪费的

所以 后来一直在网上找啊找, 但是没什么用…

2 后来尝试了一下在按钮的事件 “开始 / 结束” 的地方加上$(“#myModal”).modal({show : true}), / $(“#myModal”).modal({backdrop:false, show : true}) / $(“#myModal”).modal(“hide”) 等等
但是仍然没有什么用

3 后来灵机一现, 我何不看看这个存在背景的html 和普通当前页面的html有什么改变呢, 说不能就能找到问题所在,, 哼哼 果然如此

go [图战开始]

1) 这是页面正常的时候

bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法

2) 这里是模态框出来的时候

bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法

3) 然后 我点击了上一页

相比于原始页面”1)” 1. 多了一个div, 2. 以及body加上了一个class属性

bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法

4) 然后我删除了div

与上面的页面的变化在于页面的那个背景不存在了, 但是我现在鼠标任然不能控制页面的移动

bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法

5) 然后我删除了body的class属性

遇上一个页面相比, 我现在能够动鼠标了, 变回了正常的页面

bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法

问题解决

nice, 原来解决掉这两个地方就可以了啊, fix it !

bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法

这个问题的真正原因, 我不知道, 也就是为什么在这种场景下面会产生这种情况

参考 :

http://www.runoob.com/bootstrap/bootstrap-v2-modal-plugin.html

百度知道:如何控制模态窗口提交后,模态窗口关闭,跳转回主页面,而不是另开一个页面?

模态窗口中内嵌一个iframe 在iframe中写后台代码, 然后可以用js控制模态窗口的关闭或跳转。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
Javascript 学习笔记 错误处理
Jul 30 Javascript
jquery中的 $("#jb51")与document.getElementById("jb51") 的区别
Jul 26 Javascript
js模仿jquery的写法示例代码
Jun 16 Javascript
js改变embed标签src值的方法
Apr 10 Javascript
有关JavaScript中call()和apply() 的一些理解
May 20 Javascript
详解JavaScript中的事件流和事件处理程序
May 20 Javascript
iscroll动态加载数据完美解决方法
Jul 18 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
express默认日志组件morgan的方法
Apr 05 Javascript
vue中关闭eslint的方法分析
Aug 04 Javascript
微信小程序实现单选功能
Oct 30 Javascript
js 动态生成json对象、时时更新json对象的方法
Dec 02 #Javascript
详解JavaScript中数组的reduce方法
Dec 02 #Javascript
基于javascript实现按圆形排列DIV元素(二)
Dec 02 #Javascript
微信公众平台开发教程(六)获取个性二维码的实例
Dec 02 #Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 #Javascript
基于javascript实现按圆形排列DIV元素(一)
Dec 02 #Javascript
关于Function中的bind()示例详解
Dec 02 #Javascript
You might like
php将数据库导出成excel的方法
2010/05/07 PHP
PHP入门教程之会话控制技巧(cookie与session)
2016/09/11 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
js中取得变量绝对值的方法
2015/01/03 Javascript
jQuery中insertAfter()方法用法实例
2015/01/08 Javascript
浅析JavaScript中浏览器的兼容问题
2016/04/19 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
JavaScript实现的select点菜功能示例
2017/01/16 Javascript
JavaScript中object和Object的区别(详解)
2017/02/27 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
2017/05/13 jQuery
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
checkbox在vue中的用法小结
2018/11/13 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
Vue3为什么这么快
2020/09/23 Javascript
Python实现简单的可逆加密程序实例
2015/03/05 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
用python与文件进行交互的方法
2018/03/01 Python
Python一行代码实现快速排序的方法
2019/04/30 Python
机器学习实战之knn算法pandas
2019/06/22 Python
Python 实现取多维数组第n维的前几位
2019/11/26 Python
计算机专业毕业生推荐信
2013/11/25 职场文书
安全生产责任书范本
2014/04/15 职场文书
物理课外活动总结
2014/08/27 职场文书
模范教师材料大全
2014/12/16 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python
浅谈node.js中间件有哪些类型
2021/04/29 Javascript
Python函数中apply、map、applymap的区别
2021/11/27 Python