Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to display a popup message when a logged-out user tries to vote?
In this article, we will learn how to display a popup message when a logged-out user tried to vote using jQuery and its various methods.
In many web applications, it is important to restrict certain actions to logged-in users only, for example, voting on a poll or a form. To implement this functionality, we will use the jQuery library and some basic HTML and CSS. We will show a popup message that informs the user that they need to be logged in to perform the desired action.
Let’s understand the above approach with the help of an example −
Example 1
In this example, we will create a button with an id of "voting-button" that represents the voting action. We will also create an overlay and a popup message that will be displayed when the user tries to vote without being logged in. We will include the CSS stylings for it inside the head section of the code.
<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>
Example 2
In this example, we will use 3 different methods to display a popup message, using window’s confirm, alert, and prompt APIs.
Filename: 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>
Conclusion
In conclusion, displaying a popup message when a logged-out user tries to vote is a useful technique to ensure that only authenticated users are allowed to perform certain actions on your website. We implemented a basic functionality of the above feature with the help of jQuery and understood the concept with the help of an example.
54 Views
