<!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. Mongo集群之主从复制

    上线的系统.数据存储是重要部位.若一个公司的数据库部署还是待用单点部署,那若是宕机或是机器被损坏则是多糟糕的事情呀. 主从复制的部署方式为下图 主从复制是一个简单的数据库同步备份集群技术.这样的方式简 ...

  2. Light OJ 1341 Aladdin and the Flying Carpet

    题意:求大于b的a的因数对有几组.例10  2结果为{2,5},12 2结果为{2,6}{3,4}-----不反复 解一:分解质因数+DFS #include <iostream> #in ...

  3. FSM之三--代码风格

    FSM设计之一http://www.cnblogs.com/qiweiwang/archive/2010/11/28/1890244.html Moore型状态机与mealy型状态机相比,由于其状态输 ...

  4. Track Active Item in Solution Explorer

    Tools-->Options-->Projects and Solutions-->Track Active Item in Solution Explorer

  5. Python str 与 bytes 类型（Python2/3 对 str 的处理）

    本文均在 Python 3 下测试通过,python 2.x 会略有不同. 1. str/bytes >> s = '123' >> type(s) str >> ...

  6. 18. IDEA 添加 persistence 时没有 sessionFactory

    转自:http://www.voidcn.com/article/p-rryjfhwi-e.html IDEA 添加 persistence 时没有 sessionFactory 点击项目,然后F4 ...

  7. 流量数据iftop命令

    yum install flex byacc libpcap ncurses ncurses-devel libpcap-devel tar zxvf iftop-0.17.tar.gz cd ift ...

  8. C++ new 的用法

    原文链接:http://www.builder.com.cn/2008/0104/696370.shtml “new”是C++的一个关键字,同时也是操作符.关于new的话题非常多,因为它确实比较复杂, ...

  9. 目前常见的三种SQL分页方式：

    --top not in方式 select top 条数 * from tablename where Id not in (select top 条数*页数 Id from tablename) - ...

  10. 天意——thinkphp方法名大小写问题

    今天星期六,晚一小时上班.早起后背了会单词就骑自行车上班了.我是个有豪车梦的男生,每看到什么保时捷啊,雷克萨斯啊开过都会呆呆的看一会.现在虽然我买不上车,但是我可以靠我自己先买一台帅气的大摩托啊哈哈. ...