<!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. 【cocos2d-x 3.7 飞机大战】 决战南海I (四) 敌机管理

    敌方飞机应该不定时的出现,有自己的生命周期.运动轨迹.这个类用来管理敌机的产生.移动.爆炸.销毁等. 敌机管理类主要函数例如以下 //绑定控制器(更新分数) void bindController(C ...

  2. WAS集群系列（5）：集群搭建：步骤3：安装IHS软件

    选择"安装IBM HTTPServer"选项,点击"安装向导".例如以下图提示: 安装提示,逐步点击"下一步",当中偶有几处细节注意就可以. ...

  3. 千千万万的IT开发project师路在何方

    已经找不到该文章的最初出处了,有找到的人请告诉我.谢谢~~ 千千万万的IT开发project师路在何方 2007-06-25 21:41 恭喜,你选择开发project师作为自已的职业! 悲哀.你选择 ...

  4. POJ2485 Highways 【MST】

    Highways Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 22842   Accepted: 10525 Descri ...

  5. JNI学习积累之二 ---- 数据类型映射、域描述符说明

    本文原创,转载请注明出处:http://blog.csdn.NET/qinjuning 在Java存在两种数据类型: 基本类型 和 引用类型 ,大家都懂的 . 在JNI的世界里也存在类似的数据类型,与 ...

  6. XML结构，写到TreeView树上

    http://blog.csdn.net/ztzi321/article/details/44077563

  7. 分享一段wap框架样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 多路径软件常用操作（MPIO）

    一:查看存储盘的路径 1. 查看MPIO的存储盘的路径 # lspath (适用于所有存储的MPIO路径查询) # mpio_get_config -Av (适用于DS3K/DS4K的MPIO路径查询 ...

  9. this对象的理解

    (回答一:) (1).js的this指向是不确定的,也就是说是可以动态改变的.call/apply 就是用于改变this指向的函数,这样设计可以让代码更加灵活,复用性更高 (2).this 一般情况下 ...

  10. sigprocmask, sigpending, sigsuspend的用法

    sigset_t set sigemptyset(&set) :清空阻塞信号集合变量 sigfillset(&set) :添加所有的信号到阻塞集合变量里 sigaddset(& ...