開啟modal後要如何禁止背景捲動

jquery css body-scroll-lock

twrichgod 2019-08-01 14:50:55 ‧ 5399 瀏覽

分享至

想請問開啟modal後要如何禁止背景捲動，
我的需求是打開modal後，modal內要可以正常捲動，然後禁止背景捲動。
試了很多像是body-scroll-lock或是tua-body-scroll-lock的套件都無法達到需求，尤其是ios端...
也試過直接修改css的方法，一樣無法達成...
想請問有方法或是有推薦的套件嗎？

$('.modal').on('shown.bs.modal', function (e) {
    // 背景禁止滾動處理
}).on('hidden.bs.modal', function (e) {
    // 解除禁止滾動處理
});

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

小魚

iT邦大師 1 級 ‧ 2019-08-01 15:02:22

特殊功能自已刻,
要不然你只能用香草JS了.

回應
分享
檢舉

登入發表回應

Homura

iT邦高手 1 級 ‧ 2019-08-01 15:16:45

modal開啟時
你的<body>要修改成

overflow: hidden;

回應
分享
檢舉

登入發表回應

dragonH

iT邦超人 5 級 ‧ 2019-08-01 15:22:59

codepen

原本我是要說

直接

document.body.style.overflow = 'hidden'

可是 bootstrap 好像已經做好了?

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

Homura iT邦高手 1 級 ‧ 2019-08-01 15:25:13 檢舉

我也想說直接用bootstrap就好了!XD

dragonH iT邦超人 5 級 ‧ 2019-08-01 15:26:48 檢舉

可是他底下貼的 code 不就是 bootstrap 嗎

還是我誤會了

Homura iT邦高手 1 級 ‧ 2019-08-01 15:33:56 檢舉

他是不是亂改了什麼啊?

dragonH iT邦超人 5 級 ‧ 2019-08-01 15:39:15 檢舉

這就不知道了XD

搞不好是他的 modal 把他的 layout 撐開也說不定

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22211 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙