HTML 如何在登出的用户尝试投票时显示弹出消息

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

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

让我们借助一个示例来理解上述方法-

示例1

在这个示例中，我们将创建一个id为”voting-button”的按钮，代表投票操作。我们还将创建一个遮罩层和一个弹出消息，当用户未登录时尝试投票时将显示出来。我们将在代码的head部分包含它的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

在这个示例中，我们将使用3种不同的方法来显示一个弹出消息，使用窗口的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>