Home >Web Front-end >JS Tutorial >Basic explanation of js pop-up window

Basic explanation of js pop-up window

小云云Original: 2018-02-24 14:31:342245browse

We have used the alert() method, prompt() method, and prompt() method in some examples. They all pop up a dialog box on the screen and display the content in brackets on it. Use this This method makes the interactivity of the page more exciting. In fact, we often use this type of dialog box when browsing web pages. Dialog boxes are often used when users have two-way communication with applications.

The three dialog boxes of JavaScript are obtained by calling the three methods alert(), confirm() and prompt() of the window object. You can use these Dialog box to complete js input and output, and implement js code that can interact with users.

Today the editor will briefly introduce the three pop-up dialog boxes in js. The editor will first explain these methods in detail separately, and then compare these methods. Okay, let’s start. Our js journey `(*∩_∩*)′......

First: alert() method

The alert() method is the easiest to use among the three dialog boxes. It can be used to display the text information in the alert() brackets in the dialog box simply and clearly. We call it an alert dialog box. The information to be displayed is placed in brackets. The dialog box contains a "Confirm" button. After the user has finished reading the displayed information, he only needs to click the button to close the dialog box. Let’s look at an example of using the alert() method. The code is as follows:

<html>
<head>
<title>编写html页面</title>
<script language="javascript"> //JavaScript脚本标注
alert("上联：山石岩下古木枯");//在页面上弹出上联
alert("下联：白水泉边少女妙");//在页面上弹出下联
</script>
</head>

73a6ac4ed44ffec12cee46588e518a5e

Execute the above small example, a dialog box will pop up on the page and display the sentence "First line: The ancient trees are dead under the rocks." , as shown below:

Then, click the "Confirm" button and then the second dialog box will be displayed and "The girl beside the white water spring is wonderful!", the effect is as follows;

A dialog box pops up on the page and displays the sentence "First couplet: Ancient trees withered under the rocks." Click the "Confirm" button and then displays the second dialog box and displays "White Water" The girl by the spring is wonderful!" Let's analyze this small example:

a、在3f1c4e4b6b16bbbd69b2ee476dc4f83a脚本块中两次调用alert()方法；

b、在每个alert()括号内分别添加了一段文本信息，运行出现如下图所示的页面，当使用鼠标单击页面上的“确定”按钮后，出现第二个页面，再点击“确定”按钮后就关闭页面上的对话框。注意：两个对话框是分别显示的，而不是一个覆盖另一个，这是因为js实在执行完第一个alert()并等到用户点击“确认”按钮之后才去执行第二个alert()的。

alert()是js的window对象的一个方法，调用时可以写成window.alert()，也可以写成alert()，功能都是产生一个带确认按钮的对话框，上面显示括号内的信息，

第二种：confirm()方法

confirm()方法与alert()方法的使用十分类似，不同点是在该种对话框上除了包含一个“确认”按钮外，还有一个“取消”按钮，这种对话框称为确认对话框，在调用window对象的confirm()方法以及后面介绍的prompt()方法时也可以不写window。下面来看一个关于confirm()的小例子,代码如下所示：

<html>
<head>
<title>编写html页面</title>
<script language="javascript"> //js脚本标注
confirm("上联：一但重泥拦子路；下联：两岸夫子笑颜回"); //在页面上弹出确认对话框
</script>
</head>
</html>

分析一下这个小例子：

a、在3f1c4e4b6b16bbbd69b2ee476dc4f83a脚本块中添加confirm()方法、

b、在confirm()括号内添加了一段文本信息，运行效果如上图所示，如果用户单击“确认”按钮，则confirm()方法会返回true，如果用户单击“取消”按钮，则confirm()方法会返回false，无论用户选择哪个按钮，都会关闭对话框，而继续执行javascript代码。单击“确认”或“取消”按钮都是关闭对话框，似乎没有什么区别，实际上，无论是单击“确认”或“取消”按钮都会返回一个布尔值，这样就可以再幕后有一些js代码来发挥按钮的作用，请大家看下面的例子，体会使用confirm()返回布尔值的妙处。代码如下：

<html>
<head>
<title>编写html页面</title>
<script language="javascript"> //js脚本标注
var con;
con=confirm("你喜欢玫瑰花么?"); //在页面上弹出对话框
if(con==true)alert("非常喜欢!");
else alert("不喜欢!");
</script>
</head>
</html>

a、在3f1c4e4b6b16bbbd69b2ee476dc4f83a脚本块中声明了一个变量con。我们来分析一下这个小例子：

b、con=confirm()一句将confirm()方法返回的布尔值赋给con。

c、通过if语句来使用con的值，分别执行不同的语句；执行的效果如下：

如果单击页面的确认框上的“确定”按钮后，出现如下图所示的页面：

如果单击“取消”按钮，则出现如下图所示的页面：

第三种： prompt()方法

alert()方法和confirm()方法的使用十分类似，都是仅仅显示已有的信息，但用户不能输入自己的信息，但是prompt()可以做到这点，她不但可以显示信息，而且还提供了一个文本框要求用户使用键盘输入自己的信息，同时她还包含“确认”或“取消”两个按钮，如果用户“确认”按钮，则prompt()方法返回用户在文本框中输入的内容（是字符串类型)或者初始值(如果用户没有输入信息);如果用户单击“取消”按钮，则prompt()方法返回null，我们称这种对话框为提示框，在这三种对话框中，她的交互性最好。

看下面一个小例子：在页面上两次弹出提示对话框，使用户能输入有关信息，代码如下：

<html>
<head>
<title>编写html页面</title>
<script language="javascript"> //js脚本标注
var name,age;
name=prompt("请问你叫什么名字?"); /*在页面上弹出提示对话框，
将用户输入的结果赋给变量name*/
alert(name); //输出用户输入的信息
age=prompt("你今年多大了?","请在这里输入年龄"); /*在页面上再一次弹出提示对话框，
讲用户输入的信息赋给变量age*/
alert(age)//输出用户输入的信息
</script>
</head>
</html>

Click OK, you will have such a surprise:

We click the OK button again:

Click the OK button again:

Analyze this small example

a. Add two prompt() methods to the 3f1c4e4b6b16bbbd69b2ee476dc4f83a script block.

b. A piece of text information is added in the first prompt() bracket.

c, name=prompt() is to assign the information entered by the user in the text box to the variable name.

The differences and connections between alert(), confirm(), and prompt():

Alert box alert( )

alert is a warning box with only one button "OK" and no return value. Warning boxes are often used to ensure that users can get certain information. When the warning box appears, the user needs to click the OK button to continue the operation. Syntax: alert("text").

Confirm box confirm()

confirm is a confirmation box with two buttons, confirm or cancel, and return true or false. Confirmation boxes are used to allow users to verify or accept certain information. When the confirmation box appears, the user needs to click the OK or Cancel button to continue the operation. If the user clicks confirm, the return value is true. If the user clicks Cancel, the return value is false. Syntax: confirm("text")

Prompt box prompt()

prompt is a prompt box that returns the entered message or its default value prompt box Often used to prompt the user to enter a certain value before entering the page. When the prompt box appears, the user needs to enter a certain value and then click the confirm or cancel button to continue the operation. If the user clicks Confirm, the return value is the entered value. If the user clicks Cancel, the return value is null. Syntax: prompt("text","default value")

This article mainly introduces three pop-up dialog boxes in javascript, namely alert() method, confirm() method, prompt() Methods, the editor first introduces these methods in detail, and then compares these methods. In addition to these three pop-up dialog boxes, we can also use document.write() to directly write the message Displayed on the page, BS learning, to be continued... At the same time, thank you all for your continued support of the Script House website!

Related recommendations:

Thinkphp5 combined with layer pop-up window customization page code sharing

VUE2 event-driven pop-up window implementation example

How to create a pop-up effect with jQuery

The above is the detailed content of Basic explanation of js pop-up window. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Several practical js plug-ins for online browsing of PDF filesNext article：Several practical js plug-ins for online browsing of PDF files

See more

Basic explanation of js pop-up window

Related articles