點選藍字
關注我們！每天擷取最新的程式設計小知識！
源 / php中文網 源 / www.php.cn
本篇文章主要給大家介紹在網頁中，怎麼用簡單的js代碼實作多種彈出視窗的效果。衆所周知，大家在網站如果進行注冊或者關閉、退出等等操作，會有一個提示視窗出現。這種功能大大減少了使用者的失誤，也提高了使用者資訊的安全性。那麼有新手可能會問，這種判斷效果是如何實作的，很難操作嗎？其實隻要通過本篇淺而易懂的js彈窗代碼示例示範，就會很容易了解了。
這裡我給大家介紹js自定義彈窗的三種方式效果。希望本篇文章介紹可以讓感興趣的朋友對js自定義彈出窗的代碼原理有所幫助！
第一種js彈窗代碼具體示例如下：
js自定義彈出框代碼測試一
"utf-8"
/>
"text/javascript"
>
function
f1(){
alert(
"這是第一種彈窗提示1 alert,單擊确定後才能進行下一步的操作,隻是提醒,不能對腳本産生任何改變"
);
}
"f1();"
>彈窗提示1
效果如下圖：
注：JavaScript alert()函數
alert--彈出消息對話框(對話框中有一個OK按鈕)
alert，中文"提醒"的意思
第二種js彈窗代碼具體示例如下：
js自定義彈出框代碼測試
"utf-8"
/>
"text/javascript"
>
function
f2(){
var
flag = confirm(
"這是第二種彈窗提示2 confirm單擊确定傳回true,單擊取消傳回false"
);
if
(flag){
alert(
"你點選的是确定"
);
}
else
{
alert(
"你單擊的是取消"
);
}
}
"f2();"
>彈窗提示2
效果如下圖：
注：confirm()函數中的參數是确認框的提示語。此函數傳回值是布爾型的，點選确定，傳回值為true，點選取消傳回值為false。
第三種js彈窗代碼具體示例如下：
js自定義彈出框代碼測試
"utf-8"
/>
"text/javascript"
>
function
f3(){
var
name = prompt(
"請輸入你的名字:"
,
""
);
console.log(name);
console.log(typeof(name));
if
(
"php中文網"
=== name){
alert(
"歡迎您:"
+name);
}
else
{
alert(
"輸入有誤!"
);
}
}
"f3();"
>彈窗提示3
效果如下圖：
注：第三種js彈窗代碼需要注意的是,prompt有兩個參數,前面是提示的話,後面是當對話框出來後,在對話框裡的預設值。若點選取消按鈕,則傳回值為null,類型為object。若點選确認按鈕,則傳回值為輸入的字元串(不輸入時為空字元串),類型為string.
-END-
聲明：本文選自「 php中文網 」，搜尋「 phpcnnew 」即可關注！
▼