前端工作中,我們會遇到各種各樣的彈窗或者提示,當然現在也有不少口碑不錯的web彈層組件web彈層組件具備全方位的解決方案web彈層組件致力于服務各個水平段的開發人員web彈層組件以讓頁面可以輕松地擁有豐富而友好的操作體驗。不過今天想要說的并不是哪一款插件,而是用 JavaScript 自己創建彈窗,包括:三種消息框:警告框、確認框、提示框。

警告框

警告框經常用于確保用戶可以得到某些信息。

當警告框出現后,用戶需要點擊確定按鈕才能繼續進行操作。

語法

window.alert(“警告框”);

window.alert() 方法可以不帶上window對象,直接使用alert()方法。

實例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript 彈窗</title>
</head>
<body>
    <input type="button" onclick="myFunction()" value="顯示警告框">
    <script>
        function myFunction(){
            alert("警告框");
        }
    </script>
</body>
</html>

確認框

確認框通常用于驗證是否接受用戶操作。

當確認卡彈出時,用戶可以點擊 “確認” 或者 “取消” 來確定用戶操作。

當你點擊 “確認”, 確認框返回 true, 如果點擊 “取消”, 確認框返回 false。

語法

window.confirm(“確認框”);

window.confirm() 方法可以不帶上window對象,直接使用confirm()方法。

實例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript 彈窗</title>
</head>
<body>
    <p>點擊按鈕,顯示確認框。</p>
    <button onclick="myFunction1()">點我</button>
    <p id="demo1"></p>
    <script>
        function myFunction1(){
            var x;
             var r=confirm("按下按鈕!");
            if (r==true){
                x="你按下了\"確定\"按鈕!";
            }else{
                x="你按下了\"取消\"按鈕!";
            }
            document.getElementById("demo1").innerHTML=x;
        }
    </script>
</body>
</html>

提示框

警告框經常用于確保用戶可以得到某些信息。

當警告框出現后,用戶需要點擊確定按鈕才能繼續進行操作。

語法

window.prompt(“提示框”,”defaultvalue”);

window.prompt() 方法可以不帶上window對象,直接使用prompt()方法。

實例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript 彈窗</title>
</head>
<body>
    <input type="button" onclick="myFunction2()" value="點擊輸入">
    <p id="demo2"></p>
    <script>
        function myFunction2(){
            var person=prompt("請輸入你的名字","小萌");
            if (person!=null && person!="")
            {
                x="你好," + person + "! 感謝閱讀這篇文章";
                document.getElementById("demo2").innerHTML=x;
            }
        }
    </script>
</body>
</html>

還有一個要說的就是換行

換行

彈窗使用 反斜杠 + “n”(\n) 來設置換行。

實例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript 彈窗</title>
</head>
<body>
    <input type="button" onclick="myFunction3()" value="點擊按鈕,彈窗使用換行。">
    <script>
        function myFunction3(){
            alert("好巧\n不巧,我在等你");
        }
    </script>
</body>
</html>

DEMO在線演示