使用HTML DIV+CSS樣式+JavaScript實現自定義個性化的模態窗口

2020-12-21 一都編程

01第一節：什麼是模態窗口

#JavaScript#什麼是模態窗口，是指當模態窗口彈出來的時候，滑鼠不能單擊這個對話框之外的區域。一般用於給用戶一個提示信息，必須關閉模態窗口之後才可以進行其它的操作。

圖1

圖1就是一個使用DIV+CSS自定義的一個模態窗口，其優點是個性化強，根據系統要求完全自行設計，而系統窗口是無法做到的。

02第二節：CSS 設置

一、 position定位

在CSS樣式中，position屬性主要用來設置元素的定位。position屬性可以設置不同的定位方式，任何元素都可以定位。

絕對定位：是指針對瀏覽器的窗口位置對模態窗口進行定位，固定在一個位置，不會被其它的元素影響。相對定位：是指模態窗口的位置相對於其它元素而進行定位，會受到其它元素的影響。Position屬性的值如下說明：

圖2

元素的定位類型說明如下：

static：又稱為靜態定位，它是position屬性的默認值，屬於正常定位，也就是對於top/bottom/left/right的設置無效。absolute：又稱為絕對定位，它是基於父級別的元素進行定位的，但是該值有兩種特殊的情況：A：如果父元素沒有使用position屬性，則子元素使用position=「absolute」，子元素的top/left/right/bottom的值是相對於瀏覽器定位的。

下面我們將父元素和子元素在頁面上呈現一下，可清楚的認識它們：

圖3

B：如果父元素使用了position屬性，則子元素使用了position=「absolute」， 子元素的top/left/right/bottom的值是相對於父元素定位的。

只要父元素使用了position屬性，則子元素就是相對於父元素定位的。

圖4

fixed：不管父元素是否使用了position屬性，則子元素使用position=「fixed」都是相對於瀏覽器進行定位的。relative：在什麼情況下都是相對於父元素進行定位的。如果要使一個DIV相對於整個瀏覽器定位，並且是全屏顯示，帶背景色，則可以設置如下CSS樣式：

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><style type="text/css">body{margin:0px; padding:0px;}.alertBox{position:fixed;width:100%;height:100%;background-color:#808080;}</style></head><body><div></div></body></html>

運行一下具有背景色的頁面：

圖5

二、opacity透明

opacity屬性是CSS 3版本新增加的屬性，用於設置HTML元素的透明度，1表示不透明，0表示完全透明。透明度的設置在0-1之間。例如 opacity=0.5，半透明。

例如：現在給一個div元素設置透明度為30%

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title></head><body><div style="width:400px; height:200px; background-color:#808080;">不透明</div><div style="width:400px; height:200px; background-color:#808080;opacity:0.3">透明30%</div></body></html>

運行一下這個設置了頁面透明度的頁面：

圖6

三、 z-index堆疊

z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。

下面的Html代碼設置一下z-index屬性：

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title></head><body><div style="background-color:#808080;width:400px; height:400px;"><div style="background-color:#ff0000;width:100px; height:100px;position:fixed"></div></div></body></html>

運行一下具有z-index的頁面結果：

圖7

03第三節：DIV+CSS設置提示窗口

一、整體效果

通過上面對CSS三個屬性的設置，則可以通過DIV+CSS設置模態提示窗口，效果如下：

圖8

當點擊「保存」或「提交」按鈕之後，如果頁面上的信息沒有通過驗證，則會給出提示信息，之前我們直接使用window.alert()來提示，但通過上面的DIV+CSS模態提示窗口，更能提升用戶的體驗。

二、 CSS樣式

使用CSS設置模態窗口的完整代碼：

<style type="text/css">body {margin: 0px;padding: 0px;}/*遮罩層，帶透明度*/.alertBox {position: fixed;width: 100%;height: 100%;background-color: #808080;opacity: 0.3;z-index: 1000;display: block;}/*模態提示框*/.msgBox {background-color: #fff;z-index: 1001;position: absolute;margin: 0 auto;top: 50%;left: 50%;margin-top: -100px;margin-left: -200px;width: 400px;height: 200px;cursor: pointer;display: block;}.msgBox .title {background-color: #0094ff;color: #fff;height: 35px;line-height: 35px;text-align: right;padding-right: 5px;}.msgBox .msgBody {padding-left: 20px;margin-top: 50px;}.msgBox .msgButton{text-align:center;margin-top:20px;}.btn {background-color: #0094ff;color: #fff;width: 80px;height: 30px;border: 0px;}</style>

三、 HTML代碼

將模態窗口的CSS樣式應用在Html代碼中：

<body><div></div><div><div><div>關閉</div></div><div><span id="message"></span></div><div><input id="Button1" type="button" value="確定" /></div></div></body>

運行一下使用html+css設置的模態窗口，其最終的樣子如下圖所示：

圖9

四、 JavaScript代碼

使用JavaScript代碼來控制DIV+CSS模態窗口的顯示和隱藏。

<script type="text/javascript">function show(msg) {var alertBox = document.getElementById("alertBox");alertBox.style.display = "block";var msgBox = document.getElementById("msgBox");msgBox.style.display = "block";msgBox.style.top = "20%";var msgX = document.getElementById("message");msgX.innerText = msg;}function hideWindow() {var alertBox = document.getElementById("alertBox");alertBox.style.display = "none";var msgBox = document.getElementById("msgBox");msgBox.style.display = "none";}</script>

04第四節、完整的DIV+CSS+JS代碼

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><style type="text/css">body {margin: 0px;padding: 0px;}/*遮罩層，帶透明度*/.alertBox {position: fixed;width: 100%;height: 100%;background-color: #808080;opacity: 0.3;z-index: 1000;display: none;}/*模態提示框*/.msgBox {background-color: #fff;z-index: 1001;position: absolute;margin: 0 auto;top: 50%;left: 50%;margin-top: -100px;margin-left: -200px;width: 400px;height: 200px;cursor: pointer;display: none;}.msgBox .title {background-color: #0094ff;color: #fff;height: 35px;line-height: 35px;text-align: right;padding-right: 5px;}.msgBox .msgBody {padding-left: 20px;margin-top: 50px;}.msgBox .msgButton {text-align: center;margin-top: 20px;}.btn {background-color: #0094ff;color: #fff;width: 80px;height: 30px;border: 0px;}</style><script type="text/javascript">function show(msg) {var alertBox = document.getElementById("alertBox");alertBox.style.display = "block";var msgBox = document.getElementById("msgBox");msgBox.style.display = "block";msgBox.style.top = "20%";var msgX = document.getElementById("message");msgX.innerText = msg;}function hideWindow() {var alertBox = document.getElementById("alertBox");alertBox.style.display = "none";var msgBox = document.getElementById("msgBox");msgBox.style.display = "none";}</script></head><body><div id="alertBox"></div><div id="msgBox"><div><div onclick="hideWindow()">關閉</div></div><div><span id="message"></span></div><div><input id="Button1" type="button" onclick="hideWindow()" value="確定" /></div></div><input type="button" onclick="show('信息填寫不完整，請按要求填寫！')" value="保存" /></body></html>

將上面的代碼保存到*.html文件中，然後運行一下效果：

圖10

在圖10中點擊「保存」按鈕，就會彈出模態窗口。

圖11

在圖11中，一個完整的，顯示在瀏覽器窗口中間的模態窗口就出現了。

在這裡，我們將DIV+CSS設計的一個完整的模態窗口給開發出來了，使用模態窗口可以讓系統的提示信息更加美觀，且完整自定義和個性化，給用戶一個非常棒的用戶體驗。

相關焦點

  • 將CSS樣式代碼應用到HTML頁面的幾種方式
    例如，為一段文本設置行內樣式表，樣式例如，為一段文本設置行內樣式表，樣式分別為文字顏色、文字下劃線、文字大小和加粗，其代碼和效果如下圖：這種方式的樣式表應用，其缺點是樣式代碼不能重複使用，所以一般不建議使用
  • 《前端5分鐘》之使用純css實現網站換膚和焦點圖切換動畫
    本文轉載自【微信公眾號：趣談前端，ID:beautifulFront】經微信公眾號授權轉載，如需轉載與原文作者聯繫今天我們來繼續復盤一些工作中常用的css技巧和知識,以便我們可以更加優雅的用css實現富有動感的網站.
  • 零基礎html5+div+css+js網頁開發教程第003期 html代碼基本結構
    在第二期中，我們對html做了入門，已經有了對網頁開發基本的了解。本節知識開始書寫html網頁結構。本節知識視頻教程以下開始文字講解：一、Html代碼基本結構html代碼就像一個人一樣，可以分成幾個部分。我們先來了解三個節點。
  • CSS字體樣式
    可以使用font-family屬性來定義不同的字體，如宋體、微軟雅黑等。    font-family可以指定多種字體。使用多個字體時，將按從左到右的順序排列，並且以英文逗號（,）隔開。 <!
  • 偏門卻又實用的 CSS 樣式
    @import url("reset.css");@import url("global.css");  @import url("font.css");Outline 當點擊Input元素時顯示的當前狀態線（外發光）
  • DIV+CSS教程:[3]CSS中如何實現圖文混排
    如何實現圖文混排。網頁在沒有實現圖文混排前的效果，先做CSS樣式，看以下代碼：#title{ font-size:19px; /* 字號大小 */ font-weight:bold; /* 粗體 */ text-align:center; /* 居中 */}#content{ font-size:16px; /* 字號大小*/}這段樣式就是對文字作一個簡單的設置。
  • HTML布局與框架
    -- 使用CSS樣式來改變div的屬性 -->        <style type="text/css">            div#test_div{                color: red;            }        </style>    </head>    <
  • HTML/CSS-利用偽類實現單選框改變div的內容
    最近遇到一個需求——利用偽類和單選框改變div的內容（不能使用JavaScript）。剛剛接到這個需求的時候一臉懵逼，但是還是要做呀！下面我們來講一講實現的步驟，如果想直接看代碼請拉到文章最後。首先我們來談談單選框。
  • JavaScript通過DOM修改Html內容、Html屬性和Html標記style樣式
    使用innerHtml修改Html標記內容注意，使用innerHtml屬性只是賦帶有Html標記的內容，並不會把div標記給修改掉。三、修改Html標記屬性值：對於使用JavaScript代碼修改Html標記的屬性值，是很有用的一個功能，可以實現更多的效果，如修改img圖片的地址、修改id、name、class等屬性的值。
  • 網頁樣式——各種炫酷效果及實現代碼
    ，效果如下註：這個主要用的是 Canvas 畫布實現的，點擊背景繪製新的圖形，代碼如下：  <canvas id="evanyou" width="1920" height="934"></canvas><style type="text/css">
  • CSS Modules 與 scoped 的不一樣
    此樣式僅適用於當前組件元素，從而使組件之間的樣式不互相汙染。How?Css modules實現原理通過給樣式名加hash字符串後綴的方式，實現特定作用域語境中的樣式編譯後的樣式在全局唯一。若使用的是style-loader，則需配置更換為vue-style-loader才可生效。css modules如何解決權重問題？允許通過重命名或命名空間來封裝樣式規則，減少對選擇器的約束，從而達到不需要特定方法就可舒服的使用類名。當樣式規則耦合到每個組件時，當不再使用組件時，樣式也會被移除。
  • CSS樣式表和選擇器
    CSS的作用就是給HTML頁面標籤添加各種樣式，定義網頁的顯示效果。簡單一句話：CSS將網頁內容和顯示樣式進行分離，提高了顯示功能。css的最新版本是css3，我們目前學習的是css2.1。因為css3和css2.1不矛盾，必須先學2.1然後學3。
  • DIV+CSS規範命名大全集合
    而且慢慢會發現同行都是用一些簡短的字母表達一些常用的名字比如放置圖片的div一般取名會叫pic這樣那麼，各種常見的div一般都是如何取名字的呢？一、命名規則說明1）、所有的命名最好都小寫2）、屬性的值一定要用雙引號("")括起來，且一定要有值如class="divcss5",id="divcss5"3）、每個標籤都要有開始和結束，且要有正確的層次，排版有規律工整4）、空元素要有結束的tag或於開始的tag後加上"/"5）、表現與結構完全分離，代碼中不涉及任何的表現元素
  • HTML最基本的知識
    下圖就是html的模板。基本知識下面，我們了解下HTML最基本知識。標題HTML 標題（Heading）是通過<h1> - <h6>標籤來定義的。</p>CSS層疊樣式表(英文全稱：Cascading StyleSheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。
  • 如何在HTML文檔中使用CSS樣式表?
    使用外部樣式使用內聯樣式這是將CSS樣式添加到HTML文檔或代碼中的最簡單方法。但gt; <h2>《江城子·記夢》</h2> <h3>宋·蘇軾</h3> <p style="color:blue;font-size:16px;font-weight:bold;">十年生死兩茫茫，不思量，自難忘。
  • Markdown基礎(內含:錨點使用,使用HTML,新頁面跳轉,目錄生成)
    內含：錨點使用，使用HTML，新頁面跳轉，目錄生成,css,javascript,python,cs(csharp)等等print("以 ```python開頭，```結尾")var infos_list = new List<object>() { "C#", "JavaScript" };var infos_list = new List<object>()
  • 【小筆記】網頁設計-表格、層、css
    這個的重點在於如何使用表格。也就是<table>標籤。在DW的常用標籤裡就有插入表格的按鈕，點擊可以插入表格。表格可以設置列、行數，可以設置邊框的邊距和邊框線條等。表格可以套嵌，就是大的表格裡面插入小表格。表格可以設置對齊方式。表格可以與css樣式表結合，由css控制樣式，也可以自身在html代碼行內完成一些樣式定義。
  • 精通react/vue組件設計之實現一個輕量級可擴展的模態框組件
    本文轉載自【微信公眾號：趣談前端，ID:beautifulFront】經微信公眾號授權轉載，如需轉載與原文作者聯繫前言本文是筆者寫組件設計的第九篇文章, 今天帶大家實現一個輕量級且可靈活配置組合的模態框(Modal)組件, 該組件在諸如Antd或者elementUI等第三方組件庫中都會出現,主要用來提供系統的用戶反饋.
  • HTML5製作撲克翻牌遊戲(送《HTML5 網頁遊戲設計從基礎到開發》)
    假如希望取消這個setTimeout()，可以使用clearTimeout(t)來實現。需要強調的是，setTimeout() 只執行code一次。如果要多次調用，可以讓code自身再次調用setTimeout()。例如下面代碼調用setTimeout()實現1小時倒計時。