Home  >  Article  >  Web Front-end  >  How to bind click event in jquery to implement pop-up window

How to bind click event in jquery to implement pop-up window

青灯夜游
青灯夜游Original
2022-05-24 15:18:573821browse

Implementation method: 1. Use the "element object.click(function(){})" statement to bind the click event to the specified element and set the processing function; 2. In the function, set the "alert(information )", "confirm (information)" or "prompt (prompt, default value)" to create a pop-up window to display the specified information.

How to bind click event in jquery to implement pop-up window

The operating environment of this tutorial: windows7 system, jquery3.2.1 version, Dell G3 computer.

jquery binds click events to achieve click pop-up effects

1. Set click events

Use click() to bind a click event to the specified element and set the event handling function. Syntax:

元素对象.click(function() {
	//点击事件发生后,执行的代码
});

In the event processing function, the code written is the effect code achieved after clicking

2. Create a pop-up window

In In the event handling function, you can add alert(), confirm() or prompt() methods to add pop-up windows.

  • alert() Create an alert box

  • confirm() Create a confirmation box

  • ##prompt( )Create prompt box

1), click to pop up the warning box

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					alert("一个警告框");
				});
			});
		</script>
	</head>
	<body>

		<button>点击弹窗</button>

	</body>
</html>

How to bind click event in jquery to implement pop-up window

2), click to pop up the confirmation box

$(document).ready(function() {
	$("button").click(function() {
		confirm("一个确认框");
	});
});

How to bind click event in jquery to implement pop-up window

3), click on the prompt box

$(document).ready(function() {
	$("button").click(function() {
		prompt("请输入您的名字","Bill Gates");
	});
});

How to bind click event in jquery to implement pop-up window

[Recommended learning:

jQuery video tutorial,webfront-end video

The above is the detailed content of How to bind click event in jquery to implement 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