iT邦幫忙

0

Bootstrap JS Modal要如何保持點擊前的頁面功能以及可拖曳視窗?

正在自行研究Bootstrap JS Modal,想詢問範例中,要如何調整才可以達到以下呢?

  1. 不影響點擊前的功能操作(如圖橘框),也就是不用原視窗暗掉且原視窗功能可以操作
  2. 跳出視窗後可以拖曳(如圖綠框)
    有看到draggable這樣的屬性,但沒有嘗試成功...

https://ithelp.ithome.com.tw/upload/images/20190701/20115336eCvokwSod7.png

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

1
dragonH
iT邦超人 5 級 ‧ 2019-07-01 15:34:51
最佳解答

同 froce 大說的

你需要的功能應該不是由 modal 來實現

不過還是回答你的問題

1 .

在 modal active時

會有個 modal-backdrop 的 div蓋住你整個頁面

這在 modal 加上

data-backdrop="false"

可以停用

然後 modal 的 css 如下

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

所以他也是會蓋住你整個頁面

所以根據你這案例

可以把他往右移

不過這已經接近亂搞的程度

所以問題會很多XD

這樣就能達到你的需求
1 . 不用原視窗暗掉
2 . 原視窗可以正常操作

除非你的頁面真的就這麼簡單

不然應該沒人這樣搞XD

2 .

draggable 的功能

看到你有用 jquery

就直接用 jquery ui


以上操作之codepen

anniecat iT邦新手 3 級 ‧ 2019-07-01 15:50:28 檢舉

好的,目前只是自行研究,尚未實作,謝謝你!

2
froce
iT邦大師 1 級 ‧ 2019-07-01 14:57:25

你把綠框弄成position:fixed就行了,你想要的不叫Modal,叫popup。
然後drag要另外寫JS,光是CSS沒用。
drag的demo:
https://jsbin.com/tijuwuzuku/1/edit?html,output

anniecat iT邦新手 3 級 ‧ 2019-07-01 15:15:01 檢舉

目前有加入position:fixed的屬性,但似乎仍然無法點擊後方功能,不知道我是否改錯地方了呢? 修改後範例

另外,拖曳的部份我再研究看看,謝謝你!

froce iT邦大師 1 級 ‧ 2019-07-01 15:21:15 檢舉

你應該沒看懂我在說什麼,我也說的很簡略。
Modal會覆蓋一層div在整個畫面上,那個灰色的就是整層的div,綠框是灰色的div裡面的子元素。
然後你要的不叫Modal,就是單純跳一個position:fixed的div出來,所以只是popup而已。

如果你還看不懂的話,去讀w3school的原始碼,讀不懂的話表示你基礎還不夠。
https://www.w3schools.com/w3css/w3css_modal.asp

然後拖逸部分要用JS去實現,這個跑不掉的。

anniecat iT邦新手 3 級 ‧ 2019-07-01 15:49:46 檢舉

好的,我會花時間搞懂它,謝謝你!

我要發表回答

立即登入回答