📌  相关文章
📜  如何使用 jQuery 创建自动弹出窗口?

📅  最后修改于: 2022-05-13 01:55:55.379000             🧑  作者: Mango

如何使用 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         

        
        
        
                     
                                                       


Javascript


Javascript


    
        
        
        
 
        
        
 
        Automatic Pop-Up
        
    
 
    
        

            Automatic Pop-Up using jQuery         

        
        
        
                     
                                                                


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


完整代码:

Javascript



    
        
        
        
 
        
        
 
        Automatic Pop-Up
        
    
 
    
        

            Automatic Pop-Up using jQuery         

        
        
        
                     
                                                                

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