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 相关文章推荐
10个基于Jquery的幻灯片插件教程
Oct 29 Javascript
用js实现小球的自由移动代码
Apr 22 Javascript
js读取配置文件自写
Feb 11 Javascript
Javascript模块化编程详解
Dec 01 Javascript
AngularJS内置指令
Feb 04 Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
Apr 13 Javascript
JS隐藏号码中间4位代码实例
Apr 09 Javascript
vue中引入mxGraph的步骤详解
May 17 Javascript
VUE动态生成word的实现
Jul 26 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 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
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
PHP 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
基于php split()函数的用法详解
2013/06/05 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
网页常用特效代码整理
2006/06/23 Javascript
自动检查并替换文本框内的字符
2006/06/30 Javascript
html数组字符串拼接的最快方法
2009/09/16 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
Bootstrap的class样式小结
2016/12/01 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
nodejs搭建本地服务器并访问文件的方法
2017/03/03 NodeJs
微信小程序 自定义消息提示框
2017/08/06 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
为react组件库添加typescript类型提示的方法
2020/06/15 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
NFL Game Pass欧洲:在线观看NFL比赛直播和点播,以高清质量播放
2018/08/30 全球购物
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
大学生求职简历的自我评价
2013/10/14 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
买房协议书范本
2014/10/23 职场文书
2014年评职称工作总结
2014/11/20 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
女性励志书籍推荐
2019/08/19 职场文书
Java 数组内置函数toArray详解
2021/06/28 Java/Android
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript
「约定的梦幻岛」作画发布诺曼生日新绘
2022/03/21 日漫
Python开发五子棋小游戏
2022/04/28 Python
PHP RabbitMQ消息列队
2022/05/11 PHP