HTML Modal顯示/隱藏方向

html css modal

a999999976 2020-08-31 14:41:57 ‧ 2849 瀏覽

分享至

Hi, 各位大大:
最近剛接觸HTML的Modal控制項
目前是用Button來顯示Modal
開啟:由上而下的漸層顯示
關閉:由下而上的漸層消失

請問有什麼Css可以讓Modal開啟是"由下而上的漸層顯示"呢?

<div id="mModal" class="modal fade" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
		<div class="modal-content">
			...	
		</div>
	</div>
</div>

登入發表討論

直播研討會

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

直播中

1 個回答

listennn08

iT邦高手 5 級 ‧ 2020-08-31 15:02:53

最佳解答

modal 是 bootstrap 的東西

.modal.fade .modal-dialog {
  transform: translateY(10vh);
}

.modal.show .modal-dialog {
  transform: translateY(0);
}

demo

回應 4
分享
檢舉

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

a999999976 iT邦新手 5 級 ‧ 2020-08-31 15:52:49 檢舉

還不太懂css的相關用法，先借用了
感謝您

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2020-08-31 17:06:30 檢舉

你得先搞懂這不是css的用法。
這是 bootstrap 的東西。有搭配到它的js控制的。
css 只是輔助 bootstrap 的應用。

通靈亡 iT邦高手 1 級 ‧ 2020-08-31 23:28:28 檢舉

一開始的 Modal：
視窗的預設位置，從Bootstrap預設的往上移動50px
改為往下移動50px

.modal.fade .modal-dialog {
  transform: translateY(50px);
  /* 等於 transform: translate(0, 50px); */
}

當按下show之後的Model：.modal.show .modal-dialog
視窗位置會從一開始預設的往下移動50px，調整為沒有往下移動

如果照Bootstrap預設的位置，相當於整個視窗往下移動
蓋掉Bootstrap設定的位置，相當於讓整個視窗往上移動

.modal.show .modal-dialog {
  transform: translateY(0);
   /* 等於 transform: none;*/
}

而視窗往上或往下的部分
從Bootstrap內建的CSS可以發現
.modal.fade .modal-dialog 設定了CSS3的 transition
在指定的持續時間內平滑地更改CSS屬性值

.modal.fade .modal-dialog {
  transition: transform .3s ease-out;
}

而視窗消失和出現的淡入和淡出，在Bootstrap內建的css可以發現
.fade也有設定一個transition
當opacity 變化時，可以看到出現跟消失的淡入和淡出效果

.fade {
    transition: opacity .15s linear;
}

所以整個視窗的淡入淡出在Bootstrap共設定了兩組

往上和往下移動是藉由js改變css class，以CSS控制的
而出現跟消失的CSS變化，是由JS所控制的

listennn08 iT邦高手 5 級 ‧ 2020-09-01 10:02:43 檢舉

ease-out 是緩慢結束
淡入淡出是設在 .fade 的 opacity
是設這樣

.fade:not(.show) {
    opacity: 0
}

父層設 opacity 子層也會跟著變透明
.modal-dialog 控制的只有方向
所以他說 css 用法其實也沒錯啦因為這樣寫會有 css 外部引入與內部 style 設定的權重概念
最主要還是 js 去操作 element 的 class

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22201 篇

完賽人數

602 人

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

IT邦幫忙