在文中教程中,我們將使用CSS和JavaScript創建一個簡單的模態。實際上,我們將使用與Sabe上使用的模態相同的代碼和結構,以及本教程末尾的反饋選項。
介紹
模態彈出窗口經常在網絡上使用。它們的一些常用用途包括駕駛簡報註冊,顯示通知/警報以及處理註冊和登錄表單。
我們的模態將是通用的,這意味著您可以自由地將它用於您想要的任何目的。這是他們完成後的樣子:
開場前的模態。
打開後的模態。
在繼續之前,您可以查看成品的現場演示。現在,讓我們開始構建這個!
HTML標記
讓我們從模態的標記開始。
代碼:
<button>Click here to trigger the modal!</button>
<div>
<div>
<span>×</span>
<h1>Hello, I am a modal!</h1>
</div>
</div>
我們在標記中有三個不同的組件。
首先,我們有一個簡單的button,當點擊時,觸發模態打開。然後我們有模態的父容器,其中包含模態。最後,我們有內容將進入模態,加上一個關閉按鈕。
為了簡單起見,模態中唯一的實際內容是帶有一些文本的h1 標記。
CSS樣式
這些是我們將應用的樣式,使我們的模態看起來漂亮和漂亮。
代碼如下:
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 1rem 1.5rem;
width: 24rem;
border-radius: 0.5rem;
}
.close-button {
float: right;
width: 1.5rem;
line-height: 1.5rem;
text-align: center;
cursor: pointer;
border-radius: 0.25rem;
background-color: lightgray;
}
.close-button:hover {
background-color: darkgray;
}
.show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
讓我們分解我們正在做的事情。
代碼如下:
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transform: scale(1.1);
}
modal該類的樣式使其在模態激活時在模板後面創建半透明的深色背景顏色。我們將它拉伸到100%width並將height其設置visibility為hidden不顯示。
代碼如下:
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 1rem 1.5rem;
width: 24rem;
border-radius: 0.5rem;
}
我們將實際模態放在屏幕的中央,有一些視覺上的好東西,如a border-radius和some padding。
代碼如下:
.close-button {
float: right;
width: 1.5rem;
line-height: 1.5rem;
text-align: center;
cursor: pointer;
border-radius: 0.25rem;
background-color: lightgray;
}
.close-button:hover {
background-color: darkgray;
}
為了讓我們以優雅的方式關閉模態,我們有一個關閉按鈕,它只是X模態右上角的一個很好的按鈕。
代碼如下:
.show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
最後,我們的類在打開時處理樣式的樣式。
重點:
您需要做的就是給模態show-modal類打開它。刪除此類會將其重置為隱藏。JavaScript將為我們處理此切換。
JavaScript代碼
為了使我們的模態彈出窗口真正起作用,我們將使用非常少量的純粹的,普通的JavaScript。
代碼如下:
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
我們在這裡設置了三個點擊監聽器:
單擊觸發器時,我們要顯示模態。
單擊關閉按鈕時,我們要隱藏模態。
單擊深色背景時,我們還想隱藏模態。
大!現在,如果我們按下觸發器或關閉按鈕,模態應該在狀態之間平滑地動畫。這完全是關於漂亮的動畫。??
同樣,您可以單擊此處獲取我們創建的實時演示!
HTML
<button>Click here to trigger the modal!</button>
<div>
<div>
<span>×</span>
<h1>Hello, I am a modal!</h1>
</div>
</div>
CSS代碼:
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 1rem 1.5rem;
width: 24rem;
border-radius: 0.5rem;
}
.close-button {
float: right;
width: 1.5rem;
line-height: 1.5rem;
text-align: center;
cursor: pointer;
border-radius: 0.25rem;
background-color: lightgray;
}
.close-button:hover {
background-color: darkgray;
}
.show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
JavaScript代碼:
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
最後覺得有用的朋友可以分享轉載