如何在未登录用户尝试投票时显示弹出消息?

htmlweb developmentfront end technology更新于 2024/11/13 14:04:17

在本文中，我们将学习如何使用 jQuery 及其各种方法在未登录用户尝试投票时显示弹出消息。

在许多 Web 应用程序中，将某些操作限制为仅限登录用户执行非常重要，例如，在投票或表单上投票。为了实现此功能，我们将使用 jQuery 库以及一些基本的 HTML 和 CSS。我们将显示一条弹出消息，告知用户需要登录才能执行所需的操作。

让我们通过一个示例来理解上述方法 -

示例 1

在此示例中，我们将创建一个 id 为"voting-button"的按钮，用于表示投票操作。我们还将创建一个覆盖层和弹出消息，当用户未登录尝试投票时将显示该消息。我们将在代码的头部部分包含它的 CSS 样式。

<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

在此示例中，我们将使用三种不同的方法来显示弹出消息，分别使用窗口的确认、警报和提示 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>