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 相关文章推荐
javascript实现unicode和字符的互相转换
Jul 18 Javascript
Mootools 1.2教程(2) DOM选择器
Sep 14 Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
JS获取页面input控件中所有text控件并追加样式属性
Feb 25 Javascript
获取数组中最大最小值方法js代码(自写)
Aug 12 Javascript
JavaScript事件委托技术实例分析
Feb 06 Javascript
原生JavaScript实现异步多文件上传
Dec 02 Javascript
JavaScript中0和""比较引发的问题
May 26 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
Jul 22 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
Oct 13 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 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代码DOS造成用光网络带宽
2011/03/01 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
thinkPHP简单遍历数组方法分析
2016/05/16 PHP
php微信公众号js-sdk开发应用
2016/11/28 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
JSON与XML优缺点对比分析
2015/07/17 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
2016/11/22 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
2017/09/18 Javascript
Vuex实现计数器以及列表展示效果
2018/03/10 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
Element UI 自定义正则表达式验证方法
2018/09/04 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
Python Requests安装与简单运用
2016/04/07 Python
简单易懂的python环境安装教程
2017/07/13 Python
Django 开发环境与生产环境的区分详解
2019/07/26 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
django rest framework serializers序列化实例
2020/05/13 Python
Python使用Pygame绘制时钟
2020/11/29 Python
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
易程科技软件测试笔试
2013/03/24 面试题
英语感恩演讲稿
2014/01/14 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
教研活动总结
2014/04/28 职场文书
纪念9.18事变演讲稿
2014/09/14 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
护士实习自荐信
2015/03/06 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL