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 相关文章推荐
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
Jun 25 Javascript
HTML5附件拖拽上传drop & google.gears实现代码
Apr 28 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 Javascript
js中的json对象详细介绍
Oct 29 Javascript
node.js中的fs.open方法使用说明
Dec 17 Javascript
JSONP之我见
Mar 24 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
jQuery实现商品活动倒计时
Oct 16 Javascript
老生常谈javascript的面向对象思想
Aug 22 Javascript
vue使用自定义icon图标的方法
May 14 Javascript
Vue中的$set的使用实例代码
Oct 08 Javascript
vue.draggable实现表格拖拽排序效果
Dec 01 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
PHP4引用文件语句的对比
2006/10/09 PHP
php mysql 判断update之后是否更新了的方法
2012/01/10 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
php实现汉字验证码和算式验证码的方法
2015/03/07 PHP
php查询whois信息的方法
2015/06/08 PHP
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
jQuery中slice()方法用法实例
2015/01/07 Javascript
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
解决webpack dev-server不能匹配post请求的问题
2018/08/24 Javascript
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
python搜索指定目录的方法
2015/04/29 Python
Python中的super()方法使用简介
2015/08/14 Python
浅析python3字符串格式化format()函数的简单用法
2018/12/07 Python
详解python运行三种方式
2019/05/13 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
Under Armour美国官网:美国知名高端功能性运动品牌
2016/09/05 全球购物
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
泰国在线书店:SE-ED
2020/06/21 全球购物
网络编辑岗位职责范本
2014/02/10 职场文书
出纳员岗位责任制
2014/02/11 职场文书
英语国培研修感言
2014/02/13 职场文书
山楂树之恋观后感
2015/06/11 职场文书
教师教育心得体会
2016/01/19 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
2022/03/21 Java/Android