如何使用CSS和JavaScript創建模態彈出框

2021-01-08 醉墨衍華

在文中教程中,我們將使用CSS和JavaScript創建一個簡單的模態。實際上,我們將使用與Sabe上使用的模態相同的代碼和結構,以及本教程末尾的反饋選項。

介紹

模態彈出窗口經常在網絡上使用。它們的一些常用用途包括駕駛簡報註冊,顯示通知/警報以及處理註冊和登錄表單。

我們的模態將是通用的,這意味著您可以自由地將它用於您想要的任何目的。這是他們完成後的樣子:

開場前的模態。

打開後的模態。

在繼續之前,您可以查看成品的現場演示。現在,讓我們開始構建這個!

HTML標記

讓我們從模態的標記開始。

代碼:

<button>Click here to trigger the modal!</button>

<div>

<div>

<span>&times;</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);

最後覺得有用的朋友可以分享轉載

相關焦點

  • 教你如何編寫一個彈出框
    彈出框顧名思義就是點擊按鈕或者其它地方就會彈出一個有內容的框,而它的運用也非常廣泛,而今天在這裡依舊是教大家如何用bootstrap編寫一個彈出框(Popover)。打開HBuilder新建好項目,我們這裡取名為demo,位置放在桌面。
  • 使用HTML DIV+CSS樣式+JavaScript實現自定義個性化的模態窗口
    ,是指當模態窗口彈出來的時候,滑鼠不能單擊這個對話框之外的區域。下面我們將父元素和子元素在頁面上呈現一下,可清楚的認識它們:圖3B:如果父元素使用了position屬性,則子元素使用了position=「absolute」, 子元素的top/left/right/bottom的值是相對於父元素定位的。
  • 最新的 Javascript 和 CSS 應用技巧薈萃
    隨著前端技術的發展,javascript和css在 網站和web應用中展現出強大的統治力,特別是隨著HTML5和CSS3的標準的成熟,我們可以使用javascript和css開發出你想都沒有想到過
  • 在JavaScript中使用Window對象的警告框、確認框、窗口尺寸和操作
    概述#JavaScript#JavaScript總是與瀏覽器和Html打交道,有一套專門用於操作瀏覽器相關對象的模型,稱為瀏覽器對象模型,簡稱為BOM。主要用來對瀏覽器進行相關的操作,有了BOM,才使JavaScript可以控制瀏覽器的屬性,例如:打開窗口、關閉窗口,彈出提示框等等。
  • html框架——bootstrap手動控制模態框隱藏和顯示
    在網頁開發過程中,我們經常會使用bootstrap這套由推特開源的前端框架。其中在業務的開發過程中,存在這樣的業務場景:點擊編輯按鈕,彈出模態框,然後在模態框中對信息進行編輯。bootstrap的模態框,如果設置的是默認點擊空白處自動關閉,不是自己通過JS進行控制時,驗證信息使用alert("XXXX"),點擊否,會直接關閉模態框,之前填寫的內容會清空,導致用戶體驗不好。那麼怎麼解決這個問題呢?
  • 這樣逼格滿滿的彈出框消息提示你不心動嗎?
    可能你注意到在一些網站上有下面這個特別酷炫的彈出框,用戶體驗來說感覺很有層次動態感,比靜態的模態彈出框/消息提示更能吸引人注意,給人一種醒目,很酷的感覺!這裡使用的就是SweetAlert2庫。0x01 簡介SweetAlert2是SweetAlert-js的升級版本,它解決了SweetAlert-js中不能嵌入HTML標籤的問題,並對彈出對話框進行了優化,同時提供對各種表單元素的支持,還增加了5種情景模式的模態對話框,支持響應式布局。現在還支持toast消息提示框,輸入表單驗證等。它是jsDelivr排名上第23名的最受歡迎的包。
  • 網頁性能之html css javascript
    前言html css javascript可以算是前端必須掌握的東西了,但是我們的瀏覽器是怎樣解析這些東西的呢 我們如何處理html css javascript這些東西來讓我們的網頁更加合理,在我這裡做了一些實驗,總結起來給大家看看。
  • 彈框體系總結:模態彈框和非模態彈框
    彈框是一種重要的交互方式,主要用於完成信息傳遞和用戶反饋兩大功能。彈框很常見,但並不見的每一個設計師都可以100%的弄明白彈框這個概念。這篇文章是對彈框體系的一個簡單梳理和總結,希望可以解決大家心中的一些疑惑。我們日常所說的彈框是一個很籠統的概念。所有的對話框,浮層,提示條我們都習慣性的稱之為彈框,其實彈框我們可以分為兩種:模態彈框和非模態彈框。
  • 使用jQuery timelinr和animate.css創建超酷的CSS動畫時間軸特效
    使用jQuery timelinr和animate.css創建超酷的CSS動畫時間軸特效 在線演示1   在線演示2   本地下載在過去我們的文章中,我們介紹過很多不錯的時間軸插件
  • 實戰經驗:MFC非模態對話框的使用
    問題在MFC編程中,我們經常會使用到模態對話框,模態對話框的一個典型特徵是當對話框彈出後,其父窗口將不接受任何UI響應,直到關閉當前的模態對話框後才能繼續。然而,非模態對話框就沒有這個限制,今天我們就來講講如何在MFC中使用非模態對話框。
  • Css語法特點是什麼?Css和html、javascript的關係是什麼?
    CSS是英文Cascading Style Sheets首字母的簡寫,翻譯成中文是層疊樣式表,簡單理解它是html語言的一個應用,css可以修飾各種動態和靜態頁面,對頁面中的元素進行精準控制(是像素為單位的),css的誕生是為了解決html的顯示功能,它解決了html顯示雜亂和臃腫的問題,Css
  • 你能徹底區分開JavaScript中的警告框、確認框和提示框嗎?
    ,則可以使用警告框來實現,警告框使用window.alert()方法來實現。顯示帶有一段消息和一個確認按鈕的警告框。如下是一段完整的Html+JavaScript代碼段,用於彈出警告框的:<!確認框確認框在JavaScript中,使用confirm()方法表示,顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。注意:confirm()會返回一個布爾類型的值,如果返回的值為true,則表示用戶點擊了「確定」按鈕,否則點擊了「取消」或關閉按鈕。
  • 利用CSS、JavaScript及Ajax實現圖片預加載的三大方法
    方法一:用CSS和JavaScript實現預加載實現預加載圖片有很多方法,包括使用CSS、JavaScript及兩者的各種組合。這些技術可根據不同設計場景設計出相應的解決方案,十分高效。使用Ajax,比直接使用JavaScript,優越之處在於JavaScript和CSS的加載不會影響到當前頁面。該方法簡潔、高效。
  • 前端技巧:Javascript和Css截取字符串的方法比較
    平時前端開發工作時,經常會需要對字符串進行截斷,比如新聞標題,需要把超出可視區域後需要進行截斷,如下圖:小編我由主要負責後端開發,最開始是採用後端方法來實現字符串截斷,然後傳遞給前端人員使用。但是這個方式有一個弊端,尤其是響應式的頁面,截取字數無法精確控制,比如pc端可視區域可以顯示150個字符,但是手機端屏幕最多只能顯示20個字符,所以通過後端來控制字符數是非常爛的解決方案,最好的解決辦法是通過前端方式來截斷字符串,下面分別用javascript和css的方式來實現。先看一下html部分<div>為什麼要製作高端的網站?
  • CSS3 PK Photoshop:圓角和框投影
    本教程旨在教大家結合CSS3樣式創建一個漂亮,簡潔的導航欄。而在過去,我們只能藉助圖片,JavaScript和div層進行創作。注意:下面所有的示例都是在Mozilla Firefox,Safari和Chrome中進行測試。
  • Python用PyQt5實現多種彈出消息框,QMessageBox控制項使用詳解
    前面內容我們介紹了PyQt5中常用控制項,並針對控制項給出了詳細的使用方法和一些典型的例子。各種樣式的消息對話框在PyQt5中定義了一系列的標準對話框類,讓調用者能夠方便和快捷地通過各個類完成相應的操作。其典型子類有:QMessageBox(彈出消息對話框)、QFileDialog(文件類對話框)、QFontDialog(樣式類對話框)、QInputDialog(輸入對話框)等。QDialog主要掌握類的繼承結構和彈出窗口模態即可。
  • UI最佳實踐:深度解析模態窗口
    模態已成為今天的可怕的彈出窗口的版本。用戶發現模態窗口很騷擾人,人們本能地自動關閉這些窗口。定義模態窗口是位於應用程式主窗口頂部的元素。它創建一個模態,該模態禁用於主窗口,但保持它與模態窗口可見作為它前面的子窗口。用戶必須與模態窗口交互,才能返回到原有的應用程式。—維基百科用法當你需要的時候,你可以考慮使用模態窗口。
  • Dialog 彈出框
    介紹彈出模態框,常用於消息提示、消息確認,或在當前頁面內完成特定的交互操作。彈出框組件支持函數調用和組件調用兩種方式。函數調用Dialog 是一個函數,調用後會直接在頁面中彈出相應的模態框Dialog.alert({ title: &39;, message: &39;,}).then(() => { // on close});Dialog.alert({ message: &39;,}).then(() => { // on close});消息確認用於確認消息,包含取消和確認按鈕
  • 小白如何學好html語言?怎麼理解html和css、javascript的關係?
    html語言可以表達文字,圖形、動畫、聲音、表格、連結等信息,html語言簡單、易學容易上手學習難度並不高,每個html文檔簡單來說由頭部(head)和主體(body)兩部分組成。html二、html和css、javascript的關係?html和css、javascript在網站中扮演重要的角色,html是基礎,包括用戶要看的文字、圖片、視頻、音頻等信息。
  • Message 類的使用方法和效果
    首頁 > 語言 > 關鍵詞 > 最新資訊 > 正文 Message 類的使用方法和效果