資料結構
網路
關係資料庫管理系統
作業系統
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.com/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.com/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 次瀏覽
廣告