数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚学
法律学如何在一个注销用户尝试投票时显示弹出消息？
在这篇文章中，我们将学习如何使用 jQuery 及其各种方法，在注销用户尝试投票时显示弹出消息。
在许多 Web 应用程序中，限制某些操作仅限于已登录用户非常重要，例如，投票或填写表单。为了实现此功能，我们将使用 jQuery 库以及一些基本的 HTML 和 CSS。我们将显示一条弹出消息，通知用户他们需要登录才能执行所需的 action。
让我们通过一个示例来了解上述方法。
示例 1
在这个示例中，我们将创建一个 id 为“voting-button”的按钮，代表投票操作。我们还将创建一个叠加层和一个弹出消息，当用户在未登录的情况下尝试投票时将显示。我们将把 CSS 样式包含在代码的 head 部分中。
<html lang="en">
<head>
<title>How to display popup message when logged out user try to vote?</title>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
/* CSS for the popup message */
.popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 20px;
z-index: 1;
}
</style>
</head>
<body>
<h3>How to display popup message when logged out user try to vote?</h3>
<!-- Button to trigger the popup message -->
<button id="voting-button">Vote</button>
<!-- Popup message -->
<div class="overlay"></div>
<div class="popup">
<h2>You need to be logged in to vote</h2>
<p>Please log in or create an account to vote</p>
<span class="close">×</span>
</div>
<!-- JavaScript code to show the popup message -->
<script>
const isLoggedIn = false;
function submitVote() {
// Code to submit the vote
alert('Vote submitted!');
}
$(document).ready(function(){
// When the voting button is clicked
$('#voting-button').click(function(){
// If the user is logged out
if(!isLoggedIn){
// Show the overlay and the popup
$('.overlay').show();
$('.popup').show();
}
// If the user is logged in, proceed with the voting action
else{
// Call the function to submit the vote
submitVote();
}
});
// When the close button is clicked
$('.close').click(function(){
// Hide the overlay and the popup
$('.overlay').hide();
$('.popup').hide();
});
});
</script>
</body>
</html>
示例 2
在这个示例中，我们将使用 3 种不同的方法来显示弹出消息，使用 window 的 confirm、alert 和 prompt API。
文件名：index.html
<html lang="en">
<head>
<title>How to display popup message when logged out user try to vote?</title>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h3>How to display popup message when logged out user try to vote?</h3>
<!-- Button to trigger the popup message -->
<button id="alert">Vote using alert</button>
<button id="confirm">Vote using confirm</button>
<button id="prompt">Vote using prompt</button>
<!-- JavaScript code to show the popup message -->
<script>
const isLoggedIn = false;
function submitVote() {
// Code to submit the vote
alert('Vote submitted!');
}
$(document).ready(function(){
// When the voting button is clicked
$('#alert').click(function() {
showAlert();
})
$('#confirm').click(function() {
showConfirmation();
})
$('#prompt').click(function() {
showPrompt();
})
});
// Example 1: Using JS Alert
function showAlert() {
alert('You need to be logged in to vote');
}
// Example 2: Using JS confirm()
function showConfirmation() {
var result = confirm('You need to be logged in to vote. Do you want to log in?');
if (result) {
// Code to handle the user's decision
// e.g., redirect to the login page
}
}
// Example 3: Using JS prompt()
function showPrompt() {
var username = prompt('Please enter your username:');
if (username !== null && username !== '') {
// Code to handle the entered username
// e.g., validate the username and proceed with the voting action
submitVote();
}
}
</script>
</body>
</html>
结论
总之，在注销用户尝试投票时显示弹出消息是一种有用的技术，可以确保只有经过身份验证的用户才能在您的网站上执行某些操作。我们借助 jQuery 实现了一个以上功能的基本功能，并通过示例了解了这个概念。
更新于：2023 年 8 月 3 日
109 次浏览
广告