JavaScript幾種彈窗事件的使用
更新時(shí)間：2022年02月25日 08:30:47 作者：酷爾。
這篇文章主要介紹了JavaScript幾種彈窗事件的使用,彈窗事件就是在我們執(zhí)行某操作的時(shí)候,彈出信息框給出提示?；蚴占瘮?shù)據(jù)的時(shí)候,彈出窗口收集信息,不想收集可以取消隱藏,下文介紹需要的朋友可以參考一下
一、彈窗事件是什么？
彈窗事件就是在我們執(zhí)行某操作的時(shí)候,彈出信息框給出提示?；蚴占瘮?shù)據(jù)的時(shí)候,彈出窗口收集信息,不想收集可以取消隱藏。
二、簡述幾種彈窗的使用
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("請輸入你的名字","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é)：
這幾種彈窗方法比較簡單,使用盒子的隱藏與展示,自己也可以定制一個(gè)彈窗。感興趣的小伙伴可以進(jìn)行嘗試。
到此這篇關(guān)于JavaScript幾種彈窗事件的使用的文章就介紹到這了,更多相關(guān)JavaScript彈窗事件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript實(shí)現(xiàn)動(dòng)態(tài)顯示顏色塊的報(bào)表效果
本文主要介紹了javascript實(shí)現(xiàn)動(dòng)態(tài)顯示顏色塊的報(bào)表效果的相關(guān)知識。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04
在開發(fā)小程序的時(shí)候我們總是能遇到各種奇怪的需求,下面這篇文章主要給大家介紹了關(guān)于微信小程序返回上一頁的各種方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
這篇文章主要介紹了如何在JavaScript中正確處理變量，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-12-12
JavaScript去掉空格的方法集合，腳本之家以前發(fā)布過很多的去除空格的代碼，這個(gè)更多更全面。2010-12-12
這篇文章介紹了JS文本框追加多個(gè)下拉框的值的例子，有需要的朋友可以參考一下2013-07-07
學(xué)習(xí)框架的我，又來了?？吹?String 對象擴(kuò)展這一部分，對 trim() 這個(gè)經(jīng)常被來來說的方法比較感興趣2011-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)圖片壓縮，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)櫥窗展示效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序排坑指南，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-05-05
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)圖片瀑布流，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09