iT邦幫忙

0

HTML Modal顯示/隱藏方向

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>

1 個回答

1
listennn08
iT邦高手 7 級 ‧ 2020-08-31 15:02:53
最佳解答

modal 是 bootstrap 的東西

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

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

demo

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

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

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

通靈亡 iT邦研究生 3 級 ‧ 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所控制的

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

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

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

我要發表回答

立即登入回答