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 相关文章推荐
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
Sep 11 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
js处理json以及字符串的比较等常用操作
Sep 08 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
Angular通过指令动态添加组件问题
Jul 09 Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 Javascript
H5 js点击按钮复制文本到粘贴板
Nov 19 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
You might like
让PHP支持页面回退的两种方法
2008/01/10 PHP
php高级编程-函数-郑阿奇
2011/07/04 PHP
PHP安全上传图片的方法
2015/03/21 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
PHP多维数组排序array详解
2017/11/21 PHP
设定php简写功能的方法
2019/11/28 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
浅析PHP echo 和 print 语句
2020/06/30 PHP
javascript instanceof,typeof的区别
2010/03/24 Javascript
js中parseFloat(参数1,参数2)定义和用法及注意事项
2013/01/27 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
javascript DOM的详解及实例代码
2017/03/06 Javascript
JavaScript之map reduce_动力节点Java学院整理
2017/06/29 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
JS实现li标签的删除
2019/04/12 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
Python编程argparse入门浅析
2018/02/07 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
Css3实现无缝滚动防抖
2020/09/14 HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
前台接待岗位职责
2013/12/03 职场文书
小学生美德少年事迹
2014/02/02 职场文书
书香校园建设方案
2014/05/02 职场文书
党支部综合考察材料
2014/05/19 职场文书
运动会宣传语
2015/07/13 职场文书
初中地理教学反思
2016/02/19 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS
Vue3实现简易音乐播放器组件
2022/08/14 Vue.js