91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

javascript怎么使用alert實現一個精美的彈窗

發布時間:2023-02-22 16:24:51 來源:億速云 閱讀:95 作者:iii 欄目:開發技術

這篇文章主要講解了“javascript怎么使用alert實現一個精美的彈窗”,文中的講解內容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“javascript怎么使用alert實現一個精美的彈窗”吧!

一、為什么拋棄了alert? 

1. 不同瀏覽器的表現

其實最初使用alert還是一個常態,包括現在很多B端平臺還在直接使用alert。人們不再使用alert,大概也是因為在不同瀏覽器下他的表現形式是不同的,給用戶體驗帶來了不太好的影響。但由于美工缺失或者是使用便捷易上手,當時被人們奉為法寶啊。

// js片段
alert('最初的彈窗');

不同瀏覽器的表現形式大概是這樣:

javascript怎么使用alert實現一個精美的彈窗

javascript怎么使用alert實現一個精美的彈窗

javascript怎么使用alert實現一個精美的彈窗

其實還有很多瀏覽器,對于這個原生的老古董alert方法的表現形式完全不一樣,慢慢的人們發現用戶體驗是一個必須提升的事項,所以慢慢拋棄了alert方法。

2. 第三方組件的使用

慢慢的,人們工作量加重,開始重視工作效率了,自己寫代碼工作效率低,于是開始使用各種各樣的第三方組件,extjs easysui elementui ant 等等,既然人家提供了第三方的組件,使用快速且方便,最重要的是在每個瀏覽器的表現形式還是一致的,所以誰還會用alert呢。

javascript怎么使用alert實現一個精美的彈窗

3. 代碼意識的控制

既然alert有了以上缺點,又出現了各種各樣符合當代技術棧的UI組件庫,人們也逐漸產生了一個共有的意識,代碼里不寫alert,不寫confirm,上線不寫console.log。甚至很多授課老師也產生了這個意識,很多開始學前端的最初不知道有這個alert全局方法,老師覺得教了沒有意義,以后反正也不讓用了跳過吧。于是就真的把alert這個方法變成老古董了。

二、用alert實現一個精美彈窗

為了表示對alert的懷念,我今天就想著用alert實現一個各瀏覽器表現都一致的彈框吧,希望還有很多人看了這篇博客能夠記起這個曾經的伙伴。

1. 彈窗HTML元素的布局

首先需要實現一下你需要展示的彈窗,可以看到很多被大家所熟知的彈窗組件包含頭部,身體,以及底部按鈕部分,這些都是可以用一些簡單的div p span等標簽布局的,代碼如下:

<div class="box">
   <p class="title">標題</p>
   <div class="body">這里是一個彈窗</div>
   <div class="bottom">
       <span onclick="hideAlert()">確定</span>
   </div>
</div>

2.  CSS部分的書寫

這里基本就是模擬那些組件庫做一個彈窗的樣式,例如加一個圓角邊框啦,設置一下標題區域的寬高居中啦,中間文案區域的樣式等,底部還有一個確定按鈕,這部分整體來說比較加單,代碼如下:

* {
    margin: 0;
    padding: 0;
}
.box {
     display: none;
     margin: 100px;
     width: 396px;
     height: 180px;
     border:1px solid #EEE;
     border-radius: 10px;
}
.title {
     height: 40px;
     padding-left: 20px;
     font-size: 18px;
     font-weight: bold;
     line-height: 40px;
     background: #0052d9;
     border-radius: 10px 10px 0 0;
     color: #FFF;
}
.body {
     height: 100px;
     background: url(./bg.gif) repeat;
     text-align: center;
     color: #FFF;
     line-height: 100px;
}
.bottom {
     height: 40px;
     text-align: center;
}
.bottom span {
    margin-top: 5px;
    display: inline-block;
    width: 100px;
    height: 30px;
    border-radius: 10px;
    text-align: center;
    line-height: 30px;
}

3. 重點的alert方法覆蓋實現 

這里重點還是對alert方法的覆蓋,意思就是我還是調用alert()方法,但卻可以彈出讓每個瀏覽器表現一致的彈框,這里需要對alert方法進行重寫;

同時彈框的按鈕要具有移除彈框的功能,意思就是點擊確定按鈕,我們需要把彈框隱藏掉,這些是需要使用js來實現的,代碼如下:

let alertBox = document.querySelector('.box');
function alert() {
    alertBox.style.display = 'block';
}
alert();
 
function hideAlert() {
    alertBox.style.display = 'none';
}

javascript怎么使用alert實現一個精美的彈窗

4. 完整源代碼 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alert彈窗</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            display: none;
            margin: 100px;
            width: 396px;
            height: 180px;
            border:1px solid #EEE;
            border-radius: 10px;
        }
        .title {
            height: 40px;
            padding-left: 20px;
            font-size: 18px;
            font-weight: bold;
            line-height: 40px;
            background: #0052d9;
            border-radius: 10px 10px 0 0;
            color: #FFF;
        }
        .body {
            height: 100px;
            background: url(./bg.gif) repeat;
            text-align: center;
            color: #FFF;
            line-height: 100px;
        }
        .bottom {
            height: 40px;
            text-align: center;
        }
        .bottom span {
            margin-top: 5px;
            display: inline-block;
            width: 100px;
            height: 30px;
            border-radius: 10px;
            text-align: center;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <div class="box">
        <p class="title">標題</p>
        <div class="body">這里是一個彈窗</div>
        <div class="bottom">
            <span onclick="hideAlert()">確定</span>
        </div>
    </div>
    <script>
        let alertBox = document.querySelector('.box');
        function alert() {
            alertBox.style.display = 'block';
        }
        alert();
 
        function hideAlert() {
            alertBox.style.display = 'none';
        }
    </script>
</body>

感謝各位的閱讀,以上就是“javascript怎么使用alert實現一個精美的彈窗”的內容了,經過本文的學習后,相信大家對javascript怎么使用alert實現一個精美的彈窗這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關知識點的文章,歡迎關注!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

临武县| 洛浦县| 奈曼旗| 云和县| 双柏县| 苏州市| 兰考县| 巴中市| 兰西县| 金门县| 江西省| 原阳县| 北宁市| 沾化县| 朝阳市| 柳河县| 巴楚县| 苍溪县| 南平市| 邯郸市| 许昌市| 山西省| 弥勒县| 乌兰浩特市| 浑源县| 溆浦县| 吴旗县| 苍山县| 固始县| 庄河市| 松溪县| 巴里| 安吉县| 阿荣旗| 鲁山县| 巧家县| 桃园市| 桂东县| 手机| 阳曲县| 杭锦旗|