使用CSS3来制作消息提醒框


Posted in HTML / CSS onJuly 12, 2015

现代Web设计技术允许开发者快速实现大多数浏览器支持的动画。我想警告消息是很常见的,因为默认的JavaScript警告框的样式往往(与你自己设计的漂亮样式)很不协调很?濉U馐箍?⒄卟饺胝页瞿闹纸饩龇桨改芨?玫厥迪指?押玫挠没Ы缑娴牡缆贰?/p>

使用CSS3来制作消息提醒框
    实际演示 – 下载源代码

建立页面

首先, 我们需要创建两个文件命名为“index.html” 和 “style.css”. 我将从Google CDN上调用最新的jQuery 库. HTML是非常简单的,因为我们只需要在警告框里加入一些文本. 所有的JavaScript代码被加在了页面的底部,这样可以节省HTTP请求时间.

XML/HTML Code复制内容到剪贴板
  1. <!doctype html>  
  2. <html lang="en-US">  
  3. <head>  
  4.   <meta http-equiv="Content-Type" content="text/html;charset=utf-8">  
  5.   <title>CSS3 Notification Boxes Demo</title>  
  6.   <link rel="shortcut icon" href="http://designshack.net/favicon.ico">  
  7.   <link rel="icon" href="http://designshack.net/favicon.ico">  
  8.   <link rel="stylesheet" type="text/css" media="all" href="style.css">  
  9.   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  
  10. </head>  

头部代码设置了外部调用文件和 HTML5文档规范 . 不是很复杂因为我们只是建立一个简单的示例. 对于提示窗口我定义两个不同的样式 – 成功的和错误的. 还有一些其它风格的例如警告框和信息框, 但是我没有创建更多的,因为我更关注的是效果.

XML/HTML Code复制内容到剪贴板
  1. <div id="content">  
  2.   <!-- Icons source http://dribbble.com/shots/913555-Flat-Web-Elements -->  
  3.   <div class="notify successbox">  
  4.     <h1>Success!</h1>  
  5.     <span class="alerticon"><img src="images/check.png" alt="checkmark" /></span>  
  6.     <p>Thanks so much for your message. We check e-mail frequently and will try our best to respond to your inquiry.</p>  
  7.   </div>  
  8.      
  9.   <div class="notify errorbox">  
  10.     <h1>Warning!</h1>  
  11.     <span class="alerticon"><img src="images/error.png" alt="error" /></span>  
  12.     <p>You did not set the proper return e-mail address. Please fill out the fields and then submit the form.</p>  
  13.   </div>  
  14.      
  15.   <p>Click the error boxes to dismiss with a fading effect.</p>  
  16.      
  17.   <p>Add more by appending dynamic HTML into the page via jQuery. Plus the notifications are super easy to customize.</p>  
  18.      
  19.   <div class="btns clearfix">  
  20.     <a href="#" id="newSuccessBox" class="flatbtn">New Success Box</a>  
  21.     <a href="#" id="newAlertBox" class="flatbtn">New Alert Box</a>  
  22.   </div>  
  23. </div><!-- @end #content -->  

每个图标文件来自 免费的PSD 和UI作品. 这些图标被我调整为适当的大小.如何你需要警告/信息图标你可以变变颜色创建成你自己的. 这个类名 .notify 被添加到每一个消息DIV上. 它定义了DIV的阴影和字体类型.

其它的类例如 .successbox 和 .errorbox 充许我们改变颜色和alert窗口里的细节. 你可以看到在我的测试页里加载了两个alert窗口. 每个页面底部的按钮点击后可以在页上下方追加一个新的alert窗口.
 CSS 盒子样式

我不会将太多 CSS 重置的细节,那些在我之前的教程中很明了了。我创建了一个默认的排版,并将内置 #content 的div居中。这样创建了一个允许jQuery在页面最上面添加新警告元素的盒子区域。

CSS Code复制内容到剪贴板
  1. /** typography **/  
  2. h1 {   
  3.   font-family'Helvetica Neue'HelveticaArialsans-serif;   
  4.   font-size: 2.5em;   
  5.   line-height: 1.5em;   
  6.   letter-spacing: -0.05em;   
  7.   margin-bottom20px;   
  8.   padding: .1em 0;   
  9.   color#444;   
  10.  positionrelative;   
  11.  overflowhidden;   
  12.  whitewhite-spacenowrap;   
  13.  text-aligncenter;   
  14. }   
  15. h1:before,   
  16. h1:after {   
  17.   content"";   
  18.   positionrelative;   
  19.   displayinline-block;   
  20.   width: 50%;   
  21.   height1px;   
  22.   vertical-alignmiddle;   
  23.   background#f0f0f0;   
  24. }   
  25. h1:before {       
  26.   left: -.5em;   
  27.   margin: 0 0 0 -50%;   
  28. }   
  29. h1:after {       
  30.   left: .5em;   
  31.   margin: 0 -50% 0 0;   
  32. }   
  33. h1 > span {   
  34.   displayinline-block;   
  35.   vertical-alignmiddle;   
  36.   whitewhite-spacenormal;   
  37. }   
  38.   
  39. p {   
  40.   displayblock;   
  41.   font-size: 1.35em;   
  42.   line-height: 1.5em;   
  43.   margin-bottom22px;   
  44. }   
  45.   
  46.   
  47. /** page structure **/  
  48. #w {   
  49.   displayblock;   
  50.   width750px;   
  51.   margin: 0 auto;   
  52.   padding-top30px;   
  53. }   
  54.   
  55. #content {   
  56.   displayblock;   
  57.   width: 100%;   
  58.   background#fff;   
  59.   padding25px 20px;   
  60.   padding-bottom35px;   
  61.   -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;   
  62.   -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;   
  63.   box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;   
  64. }   
  65.   
  66. .flatbtn {   
  67.   -webkit-box-sizing: border-box;   
  68.   -moz-box-sizing: border-box;   
  69.   box-sizing: border-box;   
  70.   displayinline-block;   
  71.   outline: 0;   
  72.   border: 0;   
  73.   color#f9f8ed;   
  74.   text-decorationnone;   
  75.   background-color#b6a742;   
  76.   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);   
  77.   font-size: 1.2em;   
  78.   font-weightbold;   
  79.   padding12px 22px 12px 22px;   
  80.   line-heightnormal;   
  81.   text-aligncenter;   
  82.   vertical-alignmiddle;   
  83.   cursorpointer;   
  84.   text-transformuppercase;   
  85.   text-shadow: 0 1px 0 rgba(0,0,0,0.3);   
  86.   -webkit-border-radius: 3px;   
  87.   -moz-border-radius: 3px;   
  88.   border-radius: 3px;   
  89.   -webkit-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);   
  90.   -moz-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);   
  91.   box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);   
  92. }   
  93. .flatbtn:hover {   
  94.   color#fff;   
  95.   background-color#c4b237;   
  96. }   
  97. .flatbtn:active {   
  98.   -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);   
  99.   -moz-box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);   
  100.   box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);   
  101. }  

让效果更醒目的网页布局非常简单。任何熟悉前端网页开发的人都应该能够将其移植到自己的样式表中。我在这个扁平按钮中使用了特殊的样好似,并生成新的警告窗口。同样的,我更新了每个 .notify类元素的内部样式。

CSS Code复制内容到剪贴板
  1. /** notifications **/  
  2. .notify {   
  3.   displayblock;   
  4.   background#fff;   
  5.   padding12px 18px;   
  6.   max-width400px;   
  7.   margin: 0 auto;   
  8.   cursorpointer;   
  9.   -webkit-border-radius: 3px;   
  10.   -moz-border-radius: 3px;   
  11.   border-radius: 3px;   
  12.   margin-bottom20px;   
  13.   box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px 0px;   
  14. }   
  15.   
  16. .notify h1 { margin-bottom6px; }   
  17.   
  18. .successbox h1 { color#678361; }   
  19. .errorbox h1 { color#6f423b; }   
  20.   
  21. .successbox h1:before, .successbox h1:after { background#cad8a9; }   
  22. .errorbox h1:before, .errorbox h1:after { background#d6b8b7; }   
  23.   
  24. .notify .alerticon {    
  25.   displayblock;   
  26.   text-aligncenter;   
  27.   margin-bottom10px;   
  28. }  

我设置了一些在我的布局示例中运行良好的默认假设。所有消息通知窗口都被限定为 400px 宽,并通过使用 margin: 0 auto 在页面中居中。同时,我更新了鼠标图标为手指指针,这样用户就知道该元素可点击。我们需要创建一个 jQuery 事件监听器以用于获取用户对取消通知窗口的点击,并运行相应函数。
 jQuery动画

我的JS代码实际执行了两个不同的操作。我们首先检测包含在#content DIV中的任何现有.notify元素。一旦用户点击这个.notify框元素,我们需要淡出这个通知盒到透明度为0%(display: none),然后从DOM中移除()此元素。

JavaScript Code复制内容到剪贴板
  1. $(function(){   
  2.   $('#content').on('click''.notify'function(){   
  3.     $(this).fadeOut(350, function(){   
  4.       $(this).remove(); // after fadeout remove from DOM   
  5.     });   
  6.   });  

如果你熟悉jQuery,可能首先对这个选择器感到有些奇怪。我们并不是选择#content这个div,而是在寻找这个内容容器里面的任何.notify通知框。如果你查看一下jQuery的 .on() 方法文档,你会注意到我们可以传递另外一个选择器来作为第二个参数,它将在页面被渲染后更新。 这是一个Stack Overflow里出色的帖子,它非常详细地解释了这个概念。

我的脚本的另一部分将会检查用户何时点击了页面下方的两个按钮之一。这两个按钮的ID是#newSuccessBox 和 #newAlertBox。无论用户何时点击,我们会停止加载HREF值的默认行为,代之以创建一个新的HTML块并前置在页面上。

JavaScript Code复制内容到剪贴板
  1. // handle the additional windows   
  2. $('#newSuccessBox').on('click'function(e){   
  3.   e.preventDefault();   
  4.   var samplehtml = $('<div class="notify successbox"> <h1>Success!</h1> <span class="alerticon"><img src="images/check.png" alt="checkmark" /></span> <p>You did not set the proper return e-mail address. Please fill out the fields and then submit the form.</p> </div>').prependTo('#content');   
  5. });   
  6. $('#newAlertBox').on('click'function(e){   
  7.   e.preventDefault();   
  8.   var samplehtml = $('<div class="notify errorbox"> <h1>Warning!</h1> <span class="alerticon"><img src="images/error.png" alt="error" /></span> <p>You did not set the proper return e-mail address. Please fill out the fields and then submit the form.</p> </div>').prependTo('#content');   
  9. });   
  10. ;  

每个函数都有它自己的变量,来包含一个我用于警告框的HTML的复制/粘贴镜像。这个HTML内容存储在一个字符串中用jQuery选择器转化为一个对象。我可以使用prependTo()方法选择这个内容DIV使新的警告框出现在页面的最上方。所有新的盒子也可以同样的方式被解除,因为它们的HTML代码和用静态HTML硬编码的盒子完全相同。

HTML / CSS 相关文章推荐
利用CSS3实现炫酷的飞机起飞动画
Sep 17 HTML / CSS
animation和transition的区别
Oct 12 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
Jan 30 HTML / CSS
使用分层画布来优化HTML5渲染的教程
May 08 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
浅析移动设备HTML5页面布局
Dec 01 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
Sep 14 HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
Apr 14 HTML / CSS
css常用字体属性与背景属性介绍
Feb 28 HTML / CSS
使用CSS3创建动态菜单效果
Jul 10 #HTML / CSS
简单介绍CSS3中Media Query的使用
Jul 07 #HTML / CSS
CSS中垂直居中的简单实现方法
Jul 06 #HTML / CSS
CSS实现定位元素居中的方法
Jun 23 #HTML / CSS
利用CSS3实现文本框的清除按钮相关的一些效果
Jun 23 #HTML / CSS
使用CSS3制作饼状旋转载入效果的实例
Jun 23 #HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 #HTML / CSS
You might like
PHP set_error_handler()函数使用详解(示例)
2013/11/12 PHP
2款PHP无限级分类实例代码
2015/11/11 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
2007/02/22 Javascript
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
基于jquery实现的文字淡入淡出效果
2013/11/14 Javascript
深入理解jQuery中live与bind方法的区别
2013/12/18 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
HTML5 js实现拖拉上传文件功能
2020/11/20 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
BootStrap模态框闪退问题实例代码详解
2018/12/10 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
Python基于pillow判断图片完整性的方法
2016/09/18 Python
python2.7实现爬虫网页数据
2018/05/25 Python
opencv之颜色过滤只留下图片中的红色区域操作
2020/06/05 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
台湾团购、宅配和优惠券:17Life
2017/08/14 全球购物
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
Noon埃及:埃及在线购物
2019/11/26 全球购物
什么是属性访问器
2015/10/26 面试题
应届生人事助理求职信
2013/11/09 职场文书
建筑文秘专业个人求职信范文
2013/12/28 职场文书
《画家乡》教学反思
2014/04/22 职场文书
爱护公共设施的标语
2014/06/24 职场文书
材料化学专业求职信
2014/07/15 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript