bootstrap模態(tài)框跳轉(zhuǎn)到當(dāng)前模板頁面 框消失了而背景存在問題的解決方法
這是最近在做個人播客系統(tǒng)出現(xiàn)的一個問題,
場景如下 :
圖中我點(diǎn)擊刪除按鈕之后, 彈出一個模態(tài)框讓我選擇是回首頁還是, 上一頁, 下一頁
首頁沒什么好說的了, 就是直接跳轉(zhuǎn), 沒什么問題
上一頁, 下一頁卻是跳轉(zhuǎn)到上一篇 或者下一篇, 所有的”文章“都是用的是同一個html模板, 所以頁面沒有重新加載
于是就出現(xiàn)了 上面的問題, 模態(tài)框消失了, 但是背景卻沒有消失
對于這個問題, 我在網(wǎng)上找了好一陣子, 但是貌似并沒有相關(guān)的問題
1 所以之前我本來是想將這個問題簡單化, 直接"location = prevUrl; location.reload() ", 但是 這樣有感覺不合適, 請求兩次, 對于某些某些沒有緩存的數(shù)據(jù) 是比較浪費(fèi)的
所以 后來一直在網(wǎng)上找啊找, 但是沒什么用…
2 后來嘗試了一下在按鈕的事件 “開始 / 結(jié)束” 的地方加上$(“#myModal”).modal({show : true}), / $(“#myModal”).modal({backdrop:false, show : true}) / $(“#myModal”).modal(“hide”) 等等
但是仍然沒有什么用
3 后來靈機(jī)一現(xiàn), 我何不看看這個存在背景的html 和普通當(dāng)前頁面的html有什么改變呢, 說不能就能找到問題所在,, 哼哼 果然如此
go [圖戰(zhàn)開始]
1) 這是頁面正常的時(shí)候
2) 這里是模態(tài)框出來的時(shí)候
3) 然后 我點(diǎn)擊了上一頁
相比于原始頁面”1)” 1. 多了一個div, 2. 以及body加上了一個class屬性
4) 然后我刪除了div
與上面的頁面的變化在于頁面的那個背景不存在了, 但是我現(xiàn)在鼠標(biāo)任然不能控制頁面的移動
5) 然后我刪除了body的class屬性
遇上一個頁面相比, 我現(xiàn)在能夠動鼠標(biāo)了, 變回了正常的頁面
問題解決
nice, 原來解決掉這兩個地方就可以了啊, fix it !
這個問題的真正原因, 我不知道, 也就是為什么在這種場景下面會產(chǎn)生這種情況
參考 :
1、//www.dbjr.com.cn/article/32590.htm
2、http://www.runoob.com/bootstrap/bootstrap-v2-modal-plugin.html
3、百度知道:如何控制模態(tài)窗口提交后,模態(tài)窗口關(guān)閉,跳轉(zhuǎn)回主頁面,而不是另開一個頁面?
模態(tài)窗口中內(nèi)嵌一個iframe 在iframe中寫后臺代碼, 然后可以用js控制模態(tài)窗口的關(guān)閉或跳轉(zhuǎn)。
更多內(nèi)容請點(diǎn)擊專題《Bootstrap Modal使用教程》進(jìn)行學(xué)習(xí),希望大家喜歡。
如果大家還想深入學(xué)習(xí)bootstrap,可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附3個精彩的專題:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
基于JavaScript實(shí)現(xiàn)表格隔行換色
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)表格隔行換色,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05在js代碼拼接dom對象到頁面上去的模板總結(jié)(必看)
下面小編就為大家?guī)硪黄趈s代碼拼接dom對象到頁面上去的模板總結(jié)(必看)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02微信小程序?qū)崿F(xiàn)登陸注冊滑塊驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)登陸注冊滑塊驗(yàn)證,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05JavaScript創(chuàng)建對象的常用方式總結(jié)
這篇文章主要介紹了JavaScript創(chuàng)建對象的常用方式,結(jié)合實(shí)例形式總結(jié)分析了javascript面向?qū)ο蟪绦蛟O(shè)計(jì)中對象創(chuàng)建的常見方式、相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2018-08-08基于webpack-hot-middleware熱加載相關(guān)錯誤的解決方法
下面小編就為大家分享一篇基于webpack-hot-middleware熱加載相關(guān)錯誤的解決方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02JavaScript實(shí)現(xiàn)列表分頁功能特效
最近在做一個小項(xiàng)目,有時(shí)需要制作靜態(tài)頁面網(wǎng)站,而一旦涉及到文章的分頁,實(shí)現(xiàn)起來非常麻煩,自己又剛?cè)腴T,對js不是很熟悉,所以就拿來練練手。2015-05-05淺析Javascript ES6新增值比較函數(shù)Object.is
在Javascript中判斷相等是很常見的,常用的判斷有“==”,“===”,“!=”,“!==”,今天這篇文章我們來學(xué)習(xí)ES6中的一個方法Object.is(),有需要的可以參考學(xué)習(xí)。2016-08-08