頁面中js彈窗怎么實現？（多種樣式示例）

2020-03-24 18:10:35

字體：大中小

來源：轉載

供稿：網友

本篇文章主要給大家介紹在網頁中，怎么用簡單的js代碼實現多種彈出窗口的效果。眾所周知，大家在網站如果進行注冊或者關閉、退出等等操作，會有一個提示窗口出現。這種功能大大減少了用戶的失誤，也提高了用戶信息的安全性。那么有新手可能會問，這種判斷效果是如何實現的，很難操作嗎？其實只要通過本篇淺而易懂的js彈窗代碼示例演示，就會很容易理解了。

這里我給大家介紹js自定義彈窗的三種方式效果。希望本篇文章介紹可以讓感興趣的朋友對js自定義彈出窗的代碼原理有所幫助！

第一種js彈窗代碼具體示例如下：

<!DOCTYPE html><html><head>    <title>js自定義彈出框代碼測試一</title>    <meta charset="utf-8"/>    <script type="text/javascript">        function f1(){            alert("這是第一種彈窗提示1 alert,單擊確定后才能進行下一步的操作,只是提醒,不能對腳本產生任何改變");        }         </script></head><body><button onclick="f1();">彈窗提示1</button></body></html>

效果如下圖：

注：JavaScript alert()函數

alert--彈出消息對話框（對話框中有一個OK按鈕）

alert，中文"提醒"的意思

第二種js彈窗代碼具體示例如下：

<!DOCTYPE html><html><head>    <title>js自定義彈出框代碼測試</title>    <meta charset="utf-8"/>    <script type="text/javascript">        function f2(){            var flag = confirm("這是第二種彈窗提示2 confirm單擊確定返回true,單擊取消返回false");            if(flag){                alert("你點擊的是確定");            }else{                alert("你單擊的是取消");            }        }        </script></head><body><button onclick="f2();">彈窗提示2</button></body></html>

效果如下圖：

注：confirm()函數中的參數是確認框的提示語。此函數返回值是布爾型的，點擊確定，返回值為true，點擊取消返回值為false。

第三種js彈窗代碼具體示例如下：

<!DOCTYPE html><html><head>    <title>js自定義彈出框代碼測試</title>    <meta charset="utf-8"/>    <script type="text/javascript">        function f3(){             var name = prompt("請輸入你的名字:","");            console.log(name);            console.log(typeof(name));            if(" " === name){                alert("歡迎您:"+name);            }else{                alert("輸入有誤!");            }        }    </script></head><body><button onclick="f3();">彈窗提示3</button></body></html>

效果如下圖：