Home > Article > Web Front-end > jquery click to pop up the modification page
jquery click to pop up the modification page
- WBOYOriginal
- 2023-05-18 21:13:07633browse
In modern web development, we often need to dynamically modify page elements or interactions. This requirement is very practical in many situations. However, in order to achieve these functions, traditional HTML, CSS and JavaScript technologies have certain limitations, so many frameworks and libraries have emerged to extend their functions. Among them, jQuery is a very famous JavaScript library, which can make DOM manipulation more convenient and simple. In this article, we will introduce how to use jQuery to realize the function of clicking to pop up the modified page.
First, we need to prepare some basic HTML and CSS code so that we can display a button and the elements that need to be modified on the page. You can consider the following code structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery点击弹出修改页面</title>
<style>
/*定义弹出框*/
.pop-up{
display: none;
position: absolute;
background: white;
border: 1px solid lightgray;
padding: 20px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
</style>
</head>
<body>
<!--定义按钮-->
<button id="edit-btn">修改</button>
<!--定义需要修改的元素-->
<div id="content">
<h1>这是一个需要修改的标题</h1>
<p>这是一段需要修改的文本内容</p>
</div>
<!--定义弹出框-->
<div class="pop-up">
<h2>修改标题</h2>
<input type="text" id="title-input">
<h2>修改内容</h2>
<textarea id="content-input"></textarea>
<button id="submit-btn">提交</button>
</div>
<!--引入jQuery-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>
</html>In the above code, we define a button (id is "edit-btn"), an element that needs to be modified (id is "content"), and a popup Box (class is "pop-up"). The pop-up box contains a submit button (id is "submit-btn"), a text input box (id is "title-input") and a text field (id is "content-input"). These elements will be used in the following code.
Next, we need to use JavaScript code to realize the function of clicking the button to pop up the pop-up box. The specific implementation method is as follows:
$(document).ready(function(){
$("#edit-btn").click(function(){
$(".pop-up").show();
});
});In the above code, we first bind a document's ready event processing function to ensure that the code is executed after the page is fully loaded. Next, we use jQuery's click() function to bind a click event handler function, which is executed when the button is clicked. In the function, we use jQuery's show() function to display the pop-up box (class "pop-up").
Finally, we also need to bind a click event to the submit button. When the submit button is clicked, the modified content in the pop-up box will be filled in the corresponding element. The code is as follows:
$(document).ready(function(){
$("#edit-btn").click(function(){
$(".pop-up").show();
});
$("#submit-btn").click(function(){
var title = $("#title-input").val();
var content = $("#content-input").val();
$("#content h1").text(title);
$("#content p").text(content);
$(".pop-up").hide();
});
});In the above code, we use jQuery's val() function to obtain the text content in the text input box and text field, and use jQuery's text() function to insert these contents into the corresponding element. Finally, we use jQuery’s hide() function to hide the popup box.
To sum up, by using jQuery’s click(), show(), val() and text() functions, we can easily realize the function of clicking to pop up the modified page. This functionality is very useful in many websites, especially where interaction and dynamic updating of content are required. If you want to learn more about jQuery, you can check out the official documentation or refer to other materials to expand your knowledge and skills.
The above is the detailed content of jquery click to pop up the modification page. For more information, please follow other related articles on the PHP Chinese website!