在本文中,我们将向您展示如何制作用于订阅任何服务的自定义自动弹出框。当您访问任何特定站点时,您可能经常遇到要求订阅任何服务的弹出框。因此,在本文中,您将学习如何自定义该弹出框并制作您自己的弹出框。我们将使用简单的 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 秒后看到以下结果。