快捷導(dǎo)航

JavaScript幾種彈窗事件的使用

更新時(shí)間：2022年02月25日 08:30:47 作者：酷爾。

這篇文章主要介紹了JavaScript幾種彈窗事件的使用,彈窗事件就是在我們執(zhí)行某操作的時(shí)候,彈出信息框給出提示?；蚴占瘮?shù)據(jù)的時(shí)候,彈出窗口收集信息,不想收集可以取消隱藏,下文介紹需要的朋友可以參考一下

一、彈窗事件是什么？

彈窗事件就是在我們執(zhí)行某操作的時(shí)候,彈出信息框給出提示?；蚴占瘮?shù)據(jù)的時(shí)候,彈出窗口收集信息,不想收集可以取消隱藏。

二、簡(jiǎn)述幾種彈窗的使用

1.警告框

①效果展示

②代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>

</head>

<body>
? ? ? ? <script>
? ? ? ? function myFunction() {
? ? ? ? ??
? ? ? ? ? ? ? ? alert("你好，我是一個(gè)警告框！");
? ? ? ? }
? ? ? ?
? ? </script>
? ? <div id="demo2"></div>
? ? <div id="demo1"></div>
? ? <input type="button" value="彈窗" onclick="myFunction()">
</body>
</html>

2.選擇框

①效果展示：

②代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>

</head>
<body>
? ? ? ? <script>
? ? ? ? function myFunction1(){
? ? ? ? ? ? var x;
? ? ? ? ? ? var r=confirm("按下按鈕!");
? ? ? ? ? ? if (r==true){
? ? ? ? ? ? ? ? x="你按下了\"確定\"按鈕!";
? ? ? ? ? ? }
? ? ? ? ? ? else{
? ? ? ? ? ? ? ? x="你按下了\"取消\"按鈕!";
? ? ? ? ? ? }
? ? ? ? ? ? document.getElementById("demo1").innerHTML=x;
? ? ? ? }
? ? </script>
? ? <div id="demo2"></div>
? ? <div id="demo1"></div>
? ? <input type="button" value="選擇框" onclick="myFunction1()">
</body>
</html>

3.信息錄入框

①效果展示：

②代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>

</head>
<body>
? ? ? ? <script>
? ? ? ? function myFunction2(){
? ? ? ? ? ? var x;
? ? ? ? ? ? var person=prompt("請(qǐng)輸入你的名字","Harry Potter");
? ? ? ? ? ? if (person!=null && person!=""){
? ? ? ? ? ? ? ? x="你好 " + person + "! 今天感覺如何?";
? ? ? ? ? ? ? ? document.getElementById("demo2").innerHTML=x;
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
? ? <div id="demo2"></div>
? ? <div id="demo1"></div>
? ? <input type="button" value="填信息框" onclick="myFunction2()">
</body>
</html>

總結(jié)：

這幾種彈窗方法比較簡(jiǎn)單,使用盒子的隱藏與展示,自己也可以定制一個(gè)彈窗。感興趣的小伙伴可以進(jìn)行嘗試。

到此這篇關(guān)于JavaScript幾種彈窗事件的使用的文章就介紹到這了,更多相關(guān)JavaScript彈窗事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: