<!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. NYOJ 541 最强的战斗力

    最强DE 战斗力 时间限制:1000 ms  |  内存限制:65535 KB 难度: 描写叙述 春秋战国时期,赵国地大物博,资源很丰富.人民安居乐业.但很多国家对它虎视眈眈.准备联合起来对赵国发起一 ...

  2. DevExpress控件的安装及画图控件的使用

    近期须要绘制纵断面图,而AE自带的又不是非常好,查找资料后使用DevExpress控件中的画图控件实现了纵断面的绘制.Dev控件是须要付费的.这里我们使用破解版的哈. 安装包及破解文件上传至我的网盘了 ...

  3. 关于nios 中printf 的问题

    在nios中,有printf的程序,在线调试没有什么问题,但是下到flash里面,程序跑了一段时间就死掉了!JTAG_UART是阻塞式输出,他只是将数据输出到buffer中,等待你上位机读取,当你的b ...

  4. BZOJ5204: [CodePlus 2018 3 月赛]投票统计

    [传送门:BZOJ5204] 简要题意: 有n个选手,每个选手会选择一道题投票,求出投票最多的题目个数和这些题目的编号,如果所有题目的投票数相同,则输出-1 题解: 直接搞 离散化,然后判断就可以了 ...

  5. ASE加、解密

    AES已经变成目前对称加密中最流行算法之一:AES可以使用128.192.和256位密钥,并且用128位分组加密和解密数据. /** * 加密 * * @param content 需要加密的内容 * ...

  6. pigofzhou的巧克力棒

    Description 众所周知,pigofzhou有许多妹子.有一天,pigofzhou得到了一根巧克力棒,他想把这根巧克力棒分给他的妹子们.具体地,这根巧克力棒长为 n,他想将这根巧克力棒折成 n ...

  7. Oracle 审计初步使用

    新增一个表空间用于存储审计日志 SQL> CREATE tablespace audit_data datafile '/data/oradata/orcl/audit01.dbf' SIZE ...

  8. Ubuntu系统下的多路径软件 DM Multipath 配置。

    Ubuntu系统下的多路径软件是操作系统自带的 DM Multipath工具.------------------------------------------------------------- ...

  9. noip 2018 day1 T2 货币系统 完全背包

    Code: #include<cstdio> #include<string> #include<cstring> #include<algorithm> ...

  10. webstorm配置less解析的方法

    1.安装node.js 2.npm 安装less, npm install -g less 2.1 lessc style.less styles.css 编译 2.2 lessc –clean-cs ...