<!DOCTYPE html>

 <html>

   <head>

     <meta charset="utf-8">

     <title>JS/CSS 各种操作信息提示效果</title>

     <style>

         .alert {

     padding: 20px;

     background-color: #f44336;

     color: white;

     opacity: 1;

     transition: opacity 0.6s;

     margin-bottom: 15px;

 }

 .alert.success {background-color: #4CAF50;}

 .alert.info {background-color: #2196F3;}

 .alert.warning {background-color: #ff9800;}

 .closebtn {

     margin-left: 15px;

     color: white;

     font-weight: bold;

     float: right;

     font-size: 22px;

     line-height: 20px;

     cursor: pointer;

     transition: 0.3s;

 }

 .closebtn:hover {

     color: black;

 }

     </style>

   </head>

   <body>

    <h2>提示信息</h2>

    <p>点击 "x" 关闭提示框。</p>

    <div class="alert">

        <span class="closebtn">&times;</span>

       <strong>危险!</strong> 危险操作提示。

    </div>

      <div class="alert success">

           <span class="closebtn">&times;</span>

           <strong>成功!</strong> 操作成功提示。

     </div>

      <div class="alert info">

        <span class="closebtn">&times;</span>

        <strong>提示!</strong> 提示信息修改等。

     </div>

      <div class="alert warning">

        <span class="closebtn">&times;</span>

        <strong>警告!</strong> 提示当前操作要注意。

     </div>

     <script>

       var close = document.getElementsByClassName("closebtn");

      var i;

     for (i = 0; i < close.length; i++) {

        close[i].onclick = function(){

         var div = this.parentElement;

         div.style.opacity = "0";

         setTimeout(function(){ div.style.display = "none"; }, 600);

     }

 }

     </script>

   </body>

 </html>

JS/CSS 各种操作信息提示效果的更多相关文章

  1. js css样式操作代码（批量操作）

    js css样式操作代码(批量操作) 作者: 字体:[增加 减小] 类型:转载 时间:2009-10-09   用js控制css样式,能让网页达到良好的的用户体验甚至是动画的效果.并且考虑到效率.   ...

  2. 炫！一组单元素实现的 CSS 加载进度提示效果

    之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...

  3. css&js实现顶部banner滚动提示效果

    以一个小例子来展示滚动提示的代码部分: try.html <div id="scrollobj" > <span class="scrollTxt&qu ...

  4. html+js(swiper.js)+css左右滑动切换页面效果，适配移动端

    demo: 截图: 结构:1.swiper-progress.html2.css文件夹 -swiper.css -swiper.min.css 3.js文件夹 -swiper.min.js -swip ...

  5. js+css 动效+1的效果

    点击数值 +1 的动效 vue data:{ timer: null,plus:''// 次数 } method:{ animate(plus) { var _this = this; clearIn ...

  6. js+css实现点击回到顶部的效果（最低兼容至ie7）

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 仿网易邮箱5.0(四)：信息提示插件(tips.js)

    信息提示插件,在平常的开发中也是经常乃至的一个插件,像是一些辅助信息的提示,如:加载成功.提交信息成功或失败等等.这个插件在163邮箱中用在切换标签时提示加载状态. 下面我们先来分析一下这个小插件需要 ...

  8. jNotify：操作结果信息提示条

    我们在提交表单后,通过Ajax响应后台返回结果,并在前台显示返回信息,jNotify能非常优雅的显示操作结果信息.jNotify是一款基于jQuery的信息提示插件,它支持操作成功.操作失败和操作提醒 ...

  9. js+css实现带缓冲效果右键弹出菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 多校第十场1009 CRB and String题解

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5414 题意:给你两个字符串s和t,你能够在字符串s中随意选一个字符c,在该字符c后插入一个字符d(d! ...

  2. QString::toStdString() crashes

    今天在Qt中开发程序时,遇到一个QString::toStdString()的内存问题,用法如下: void test(const QString& theFileName) { std::s ...

  3. DNS隧道和工具

    DNS Tunneling及相关实现 转自:http://www.freebuf.com/sectool/112076.html DNS Tunneling,是隐蔽信道的一种,通过将其他协议封装在DN ...

  4. commons-fileupload 多文件上传

    第三方的文件上传工具类,例如这个东东:http://www.oschina.net/p/commons-fileupload,解析的方法无非就是这样: 1:在 controller 中先 HttpSe ...

  5. Sqoop Import原理和详细流程讲解

    Sqoop Import原理 Sqoop Import详细流程讲解 Sqoop在import时,需要指定split-by参数.Sqoop根据不同的split-by参数值来进行切分,然后将切分出来的区域 ...

  6. CentOS7 PXE安装批量安装操作系统

    1.安装相关软件 yum -y install tftp-server httpd dhcp syslinux 2.配置DHCP cp /usr/share/doc/dhcp-4.2.5/dhcpd. ...

  7. JAVA基础数据类型

    JAVA的数据类型粗略分两种 1.基本数据类型 整数类型: byte,short,int,long 浮点类型: float,double 字符类型: char 布尔类型: boolean 基本语法格式 ...

  8. pycharm 添加注册码

    https://blog.csdn.net/u014044812/article/details/78727496

  9. 51nod 最大子段和问题

    给出一个整数数组a(正负数都有),如何找出一个连续子数组(可以一个都不取,那么结果为0),使得其中的和最大? 用f[i]表示以i为结尾的最大字段和,也就是说i一定要取, 那么f[i] = max(a[ ...

  10. 一种基于RGB空间的对照度增强的filter

    今天看前辈博客的时候看到一种新的基于RGB颜色空间的image contrast enhance filter 流浪的鱼link: http://blog.csdn.net/jia20003/arti ...