编程 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 相关文章推荐

AJAX异步从优酷专辑中采集所有视频及信息（JavaScript代码）

Nov 20 Javascript

Js 获取当前函数参数对象的实现代码

Jun 20 Javascript

JS中substring与substr的用法

Nov 16 Javascript

微信小程序点击控件后选中其它反选实例详解

Feb 21 Javascript

jQuery图片瀑布流的简单实现代码

Mar 15 Javascript

Bootstrap标签页（Tab）插件使用方法

Mar 21 Javascript

xmlplus组件设计系列之文本框（TextBox)（3）

May 03 Javascript

vue父组件中获取子组件中的数据(实例讲解)

Sep 27 Javascript

JavaScript中join()、splice()、slice()和split()函数用法示例

Aug 24 Javascript

iview在vue-cli3如何按需加载的方法

Oct 31 Javascript

浅谈Vue.js之初始化el以及数据的绑定说明

Nov 14 Javascript

js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期

Feb 01 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