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 相关文章推荐
JQuery autocomplete 使用手册
Apr 01 Javascript
解决jquery1.9不支持browser对象的问题
Nov 13 Javascript
JS替换文本域内的回车示例
Feb 18 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
Jan 28 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 Javascript
学习使用AngularJS文件上传控件
Feb 16 Javascript
jQuery中的Deferred和promise 的区别
Apr 03 Javascript
JS添加或修改控件的样式(Class)实现方法
Oct 15 Javascript
微信小程序授权获取用户详细信息openid的实例详解
Sep 20 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
vue项目首屏打开速度慢的解决方法
Mar 31 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
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
php array_slice函数的使用以及参数详解
2008/08/30 PHP
php ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
PHP面向对象程序设计之构造方法和析构方法详解
2019/06/13 PHP
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
javascript的parseFloat()方法精度问题探讨
2013/11/26 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
js时间比较 js计算时间差的简单实现方法
2016/08/26 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
vue元素实现动画过渡效果
2017/07/01 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
使用javascript函数编写简单银行取钱存钱流程
2018/05/26 Javascript
d3.js实现图形缩放平移
2019/12/19 Javascript
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
vue如何使用rem适配
2021/02/06 Vue.js
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
Python 支持向量机分类器的实现
2020/01/15 Python
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
Java面试题:请问一下代码输出是什么
2015/05/27 面试题
大学生个人总结的自我评价
2013/10/05 职场文书
医学毕业生自我鉴定
2013/10/30 职场文书
学生处主任岗位职责
2013/12/01 职场文书
大学生家政服务项目创业计划书
2014/01/30 职场文书
新兵入伍心得体会
2014/09/04 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
公司搬迁通知
2015/04/20 职场文书
用Python简陋模拟n阶魔方
2021/04/17 Python