iT邦幫忙

0

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

  • 分享至 

  • xImage

想請問開啟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 }} |
{{ formatDate(item.duration) }}
直播中
1
小魚
iT邦大師 1 級 ‧ 2019-08-01 15:02:22

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

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

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

overflow: hidden;
1
dragonH
iT邦超人 5 級 ‧ 2019-08-01 15:22:59

codepen

原本我是要說

直接

document.body.style.overflow = 'hidden'

可是 bootstrap 好像已經做好了?

看更多先前的回應...收起先前的回應...
Homura iT邦高手 1 級 ‧ 2019-08-01 15:25:13 檢舉

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

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

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

還是我誤會了/images/emoticon/emoticon21.gif

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

他是不是亂改了什麼啊?/images/emoticon/emoticon06.gif

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

這就不知道了XD /images/emoticon/emoticon50.gif

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

我要發表回答

立即登入回答