如何使用 jQuery 生成一个简单的弹出窗口？

任务是使用 jQuery 生成一个弹出窗口。弹出窗口有助于向网站访问者展示重要信息。

方法：使用 jQuery 的toggle()方法可以制作一个简单的弹出窗口，该方法在 jQuery 的 hide() 和 show()函数之间切换，即检查所用选择器的可见性。 hide()方法在选择器可见时运行， show()在选择器不可见时运行。

如果单击显示弹出按钮，则显示弹出窗口，如果单击关闭的按钮，则隐藏弹出窗口。

用于切换的选择器是“.content” ，它包含关闭按钮和弹出窗口的主体。最初是为了隐藏弹出窗口 在页面重新加载时，我们在 style 标签中的.content类上使用了display: none属性。

现在，当用户单击显示弹出按钮时， onclick 事件调用显示弹出窗口的togglePopup() ，当用户再次单击关闭按钮时，onclick 事件调用隐藏弹出窗口的togglePopup() 。

句法：

$(selector).toggle();

例子：

HTML

  

    
    
    
      
    
        .content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 500px;
            height: 200px;
            text-align: center;
            background-color: #e8eae6;
            box-sizing: border-box;
            padding: 10px;
            z-index: 100;
            display: none;
            /*to hide popup initially*/
        }
          
        .close-btn {
            position: absolute;
            right: 20px;
            top: 15px;
            background-color: black;
            color: white;
            border-radius: 50%;
            padding: 4px;
        }
    

  

    show popup
  
    
    
        
            ×
        
        Popup
  
        
            jQuery is an open source JavaScript library 
            that simplifies the interactions between an
            HTML/CSS document, or more precisely the 
            Document Object Model (DOM), and JavaScript.
            Elaborating the terms, jQuery simplifies 
            HTML document traversing and manipulation, 
            browser event handling, DOM animations, 
            Ajax interactions, and cross-browser 
            JavaScript development.
        
    
  
    
      
        // Function to show and hide the popup
        function togglePopup() {
            $(".content").toggle();
        }
    

  

输出：