Three pop-up windows of JavaScript

There are three types of JavaScript pop-up windows - warning box, confirmation box and prompt box

1.alert()--alert box

Description: Alert boxes are often used to ensure that certain information is available to the user

语法:alert("sometext");\window.alert("sometext");

Notice:

          (1) The return value of this method is undefined

          (2) The dialog box popped up by the alert() method is a modal dialog box

              The program pauses until the dialog is closed, and continues execution until it is closed

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js弹窗</title>
	</head>
	<body>
		<button>alert()警告框</button>
	</body>
	<script type="text/javascript">
		document.querySelectorAll("button")[0].onclick = function(){
			var result = alert("这是一个警告框");
			console.log(result); //undefined
		};
	</script>
</html>

2.confirm()--confirmation box

Description: The confirmation box is usually used to verify whether to accept user operations

语法:confirm("sometest");\window.confirm("sometext");

Notice:

          (1) Click the OK button to return true, and the cancel button to return false

          (2) The dialog box popped up by the confirm() method is a modal dialog box

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js弹窗</title>
	</head>
	<body>
		<button>confirm()确认框</button>
	</body>
	<script type="text/javascript">
		document.querySelectorAll("button")[0].onclick = function(){
			var result = confirm("这是一个确认框?");
			console.log(result); 
		};
	</script>
</html>

3.prompt()--prompt box

Description: The prompt box is often used to prompt the user to enter a value before entering the page

语法:prompt("sometext","defaultvalue");\window.prompt("sometext","defaultvalue");

Notice:

          (1) If you directly click to cancel, return null

          (2) If it is determined by the default value and click OK directly, it will return to the default value. If something is entered, return the entered content

          (3) If there is no default value and you click OK directly, return an empty string. If something is entered, return the entered content

          (4) The dialog box popped up by the prompt() method is a modal dialog box. The program pauses before the dialog box is closed, and cannot continue until it is closed.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js弹窗</title>
	</head>
	<body>
		<button>prompt()提示框</button>
	</body>
	<script type="text/javascript">
		document.querySelectorAll("button")[0].onclick = function(){
			var result = prompt("几天几号?","1");
			console.log(result);
		};
	</script>
</html>

expand:

The pop-up window uses backslash + n (\n) to set the newline

alert("hello\n hello world!");
confirm("hello\n hello world!");
prompt("hello\n hello world!");

 

Guess you like

Origin blog.csdn.net/weixin_55992854/article/details/117391031