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对checkbox操作 (循环获取)
May 20 Javascript
JQueryEasyUI Layout布局框架的使用
Apr 08 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
jquery实现pager控件示例
Apr 09 Javascript
jquery中$each()方法的使用指南
Apr 30 Javascript
jQuery的文档处理程序详解
May 10 Javascript
js html css实现复选框全选与反选
Oct 09 Javascript
jquery二级目录选中当前页的css样式
Dec 08 Javascript
vue实现条件判断动态绑定样式的方法
Sep 29 Javascript
vue 设置 input 为不可以编辑的实现方法
Sep 19 Javascript
JavaScript canvas绘制折线图
Feb 18 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
一个简单的MySQL数据浏览器
2006/10/09 PHP
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
php之readdir函数用法实例
2014/11/13 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
2014/07/23 Javascript
js style动态设置table高度
2014/10/21 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
一道JS前端闭包面试题解析
2015/12/25 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
JavaScript实现星级评分
2017/01/12 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
2017/10/26 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
2018/12/04 jQuery
vue实现页面滚动到底部刷新
2019/08/16 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
2020/04/26 Javascript
Python中给List添加元素的4种方法分享
2014/11/28 Python
基于python历史天气采集的分析
2019/02/14 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
大学生自荐信
2013/12/11 职场文书
信息学院毕业生自荐信范文
2014/03/04 职场文书
学习保证书范文
2014/04/30 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
会计实训报告范文
2014/11/04 职场文书
2014年变电站工作总结
2014/12/19 职场文书
三八节祝酒词
2015/08/11 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
高中历史教学反思
2016/02/19 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python
python实现双向链表原理
2022/05/25 Python