如何使用 jQuery 创建自动弹出窗口？

在本文中，我们将向您展示如何制作用于订阅任何服务的自定义自动弹出框。当您访问任何特定站点时，您可能经常遇到要求订阅任何服务的弹出框。因此，在本文中，您将学习如何自定义该弹出框并制作您自己的弹出框。我们将使用简单的 HTML、CSS、Bootstrap 和 jQuery 代码来演示该过程。

解释：

首先，我们需要创建一个index.html文件并粘贴以下index.html文件的代码到。此index.html文件包含位于 body 标记底部的app.js文件。现在在app.js文件中编写 jQuery 就绪函数，该函数仅在文档就绪时运行。之后， setTimeout()函数会在 3 秒后运行，在该setTimeout()函数，我们将使弹出框的显示为“块”，使其在 3 秒后可见。然后我们在两个按钮上应用了点击事件，只要有人点击它，弹出框的显示就会变成“无”。

HTML代码：

HTML

    
        
        
        
 
        
        
 
        Automatic Pop-Up
      
    
 
    
        
            Automatic Pop-Up using jQuery
        
        
        
        
            
                
 
                
                    Subscribe
                
                
                    No, Thanks
                
            
        
 
        
        
        
 
        
 
        
    

CSS代码：

body{
  height: 200vh;
  width: 100%;
  background: rgba(0, 0, 0, .5);
  z-index: 111;
 }
#popup{
  width: 550px;
  height: 250px;
  background-image: 
   url(https://images-na.ssl-images-amazon.com/
     images/I/31Xl85rQxbL._SY355_.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 2px 2px 5px 3px white;
 }
#emailId{
  text-align: center;
  position: absolute;
  left: 25%;
  top: 25%;
 }
.submitId {
  position: relative;
  top: 130px;
  left: 180px; 
 }

JavaScript：

Javascript

// When document is ready
$(document).ready(function(){
// SetTimeout function
 // Will execute the function
  // after 3 sec
setTimeout(function(){
  $('.POPmain').css(
    'display', 'block');
}, 3000)
});
$('.submitId').click(
  function(){
  $('.POPmain').css(
    'display', 'none');
});

完整代码：

Javascript

    
        
        
        
 
        
        
 
        Automatic Pop-Up
        
            body {
                height: 200vh;
                width: 100%;
                background: rgba(0, 0, 0, 0.5);
                z-index: 111;
            }
            #popup {
                width: 550px;
                height: 250px;
                background-image: url(
https://images-na.ssl-images-amazon.com/images/I/31Xl85rQxbL._SY355_.png);
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                box-shadow: 2px 2px 5px 3px white;
            }
            #emailId {
                text-align: center;
                position: absolute;
                left: 25%;
                top: 25%;
            }
            .submitId {
                position: relative;
                top: 130px;
                left: 180px;
            }
        
    
 
    
        
            Automatic Pop-Up using jQuery
        
        
        
        
            
                
 
                
                    Subscribe
                
                
                    No,Thanks
                
            
        
 
        
        
        
 
        
 
        
        
            // When document is ready
            $(document).ready(function () {
                // SetTimeout function
                // Will execute the function
                // after 3 sec
                setTimeout(function () {
                    $(".POPmain").css("display", "block");
                }, 3000);
            });
            $(".submitId").click(function () {
                $(".POPmain").css("display", "none");
            });
        
    

输出：当您在浏览器中打开index.html文件时，您将在 3 秒后看到以下结果。