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 相关文章推荐
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
Oct 01 Javascript
javascript 控制input只允许输入的各种指定内容
Jun 19 Javascript
js获取json元素数量的方法
Jan 27 Javascript
详解JavaScript中getFullYear()方法的使用
Jun 10 Javascript
jquery实现最简单的滑动菜单效果代码
Sep 12 Javascript
jQuery获取元素父节点的方法
Jun 21 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
Aug 08 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
JavaScript登录记住密码操作(超简单代码)
Mar 22 Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 Javascript
Layer+Echarts构建弹出层折线图的方法
Sep 25 Javascript
解决 window.onload 被覆盖的问题方法
Jan 14 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
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
Yii视图CGridView列表用法实例分析
2016/07/12 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
JS 对java返回的json格式的数据处理方法
2016/12/05 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
一种angular的方法级的缓存注解(装饰器)
2018/03/13 Javascript
vue实现条件判断动态绑定样式的方法
2018/09/29 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
python实现SMTP邮件发送功能
2020/06/16 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
python opencv捕获摄像头并显示内容的实现
2019/07/11 Python
django 类视图的使用方法详解
2019/07/24 Python
详解Django CAS 解决方案
2019/10/30 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
python 异步async库的使用说明
2020/05/04 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
世界上最好的帽子:Tilley
2016/11/27 全球购物
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
十岁生日父母答谢词
2014/01/18 职场文书
电气个人求职信范文
2014/02/04 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
门面房租房协议书
2014/12/01 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
2019请假条的基本格式及范文!
2019/07/05 职场文书
Python+DeOldify实现老照片上色功能
2022/06/21 Python