编程 Javascript

JavaScript实现简单的弹窗效果

Posted in Javascript onMay 19, 2020

本文实例为大家分享了JavaScript实现弹窗效果的具体代码，供大家参考，具体内容如下

使用css动画效果实现弹窗缓慢弹出和收回。

使用JavaScript实现定时弹出定时收回。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>简单弹窗</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .pop {
      width: 400px;
      height: 300px;
      position: fixed;
      bottom: 0;
      right: 0;
      display: none;
      animation: pop 1s ease-in-out 0s;
    }
    @keyframes pop {
      from {
        height: 0;
      }
      to {
        height: 300px;
      }
    }
    .down {
      width: 400px;
      height: 0;
      position: fixed;
      bottom: 0;
      right: 0;
      display: block;
      animation: out 1s ease-in-out;
    }
    @keyframes out {
      from {
        height: 300px;
      }
      to {
        height: 0;
      }
    }
    .img1 {
      width: 400px;
      height: 300px;
      vertical-align: top;
    }
  </style>
</head>
<body>
<div class="pop" id="pop">
  <img src="images/01.jpg" alt="" class="img1">
</div>
</body>
<script>
  window.onload = function () {
    timer = window.setInterval(imgBlock, 2000);
  };
  function imgBlock() {
    var pop = document.getElementById('pop');
    pop.style.display = 'block';
    timer2 = window.setInterval(imgNone,5000);
  }
  function imgNone() {
    var pop = document.getElementById('pop');
    pop.className = 'down';
    clearInterval(timer);
    clearInterval(timer2);
  }
</script>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

JavaScript实现简单的弹窗效果

- Author -

安心写bug

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js left,right,mid函数

Jun 10 Javascript

Prototype RegExp对象学习

Jul 19 Javascript

JavaScript Event学习第六章事件的访问

Feb 07 Javascript

Jquery之Ajax运用学习运用篇

Sep 26 Javascript

Knockout数组(observable)使用详解示例

Nov 15 Javascript

JS实现的网页背景闪电闪烁效果代码

Oct 17 Javascript

纯JS实现出生日期[年月日]下拉菜单效果

Jun 01 Javascript

在iFrame子页面里实现模态框的方法

Aug 17 Javascript

详解js中Array的方法及技巧

Sep 12 Javascript

JavaScript运行机制实例分析

Apr 11 Javascript

JavaScript进阶（一）变量声明提升实例分析

May 09 Javascript

js定时器出现第一次延迟的原因及解决方法

Jan 04 Javascript

js实现自定义右键菜单

May 18 #Javascript

微信小程序手动添加收货地址省市区联动

May 18 #Javascript

怎么理解wx.navigateTo的events参数使用详情

May 18 #Javascript

django简单的前后端分离的数据传输实例 axios

May 18 #Javascript

vue+koa2搭建mock数据环境的详细教程

May 18 #Javascript

Vue 基于 vuedraggable 实现选中、拖拽、排序效果

May 18 #Javascript

react 生命周期实例分析

May 18 #Javascript