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 相关文章推荐
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
js 弹出菜单/窗口效果
Oct 30 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 Javascript
分享jQuery插件的学习笔记
Jan 14 Javascript
js实现图片无缝滚动特效
Mar 19 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
Sep 28 Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 Javascript
微信js-sdk 录音功能的示例代码
Nov 01 Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 Javascript
Vue实现简单的留言板
Oct 23 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写出自己的BLOG系统 2
2010/04/12 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
php实现的双色球算法示例
2017/06/20 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
3Z版基于jquery的图片复选框(asp.net+jquery)
2010/04/12 Javascript
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
2014/12/18 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
Vue监听数组变化源码解析
2017/03/09 Javascript
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
[03:42]2016国际邀请赛中国区预选赛首日现场玩家采访
2016/06/26 DOTA
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
python 调用c语言函数的方法
2017/09/29 Python
python多进程间通信代码实例
2019/09/30 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
Booking.com缤客中国:全球酒店在线预订网站
2020/05/03 全球购物
工程项目经理岗位职责
2013/12/15 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android
配置Kubernetes外网访问集群
2022/03/31 Servers
Vue Element plus使用方法梳理
2022/12/24 Vue.js