首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

使用CSS3来制作消息提醒框

Posted in HTML / CSS onJuly 12, 2015

现代Web设计技术允许开发者快速实现大多数浏览器支持的动画。我想警告消息是很常见的，因为默认的JavaScript警告框的样式往往（与你自己设计的漂亮样式）很不协调很?濉Ｕ馐箍?⒄卟饺胝页瞿闹纸饩龇桨改芨?玫厥迪指?押玫挠没Ы缑娴牡缆贰?/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', Helvetica, Arial, sans-serif;   
  4.   font-size: 2.5em;   
  5.   line-height: 1.5em;   
  6.   letter-spacing: -0.05em;   
  7.   margin-bottom: 20px;   
  8.   padding: .1em 0;   
  9.   color: #444;   
  10.  position: relative;   
  11.  overflow: hidden;   
  12.  whitewhite-space: nowrap;   
  13.  text-align: center;   
  14. }   
  15. h1:before,   
  16. h1:after {   
  17.   content: "";   
  18.   position: relative;   
  19.   display: inline-block;   
  20.   width: 50%;   
  21.   height: 1px;   
  22.   vertical-align: middle;   
  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.   display: inline-block;   
  35.   vertical-align: middle;   
  36.   whitewhite-space: normal;   
  37. }   
  38.   
  39. p {   
  40.   display: block;   
  41.   font-size: 1.35em;   
  42.   line-height: 1.5em;   
  43.   margin-bottom: 22px;   
  44. }   
  45.   
  46.   
  47. /** page structure **/  
  48. #w {   
  49.   display: block;   
  50.   width: 750px;   
  51.   margin: 0 auto;   
  52.   padding-top: 30px;   
  53. }   
  54.   
  55. #content {   
  56.   display: block;   
  57.   width: 100%;   
  58.   background: #fff;   
  59.   padding: 25px 20px;   
  60.   padding-bottom: 35px;   
  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.   display: inline-block;   
  71.   outline: 0;   
  72.   border: 0;   
  73.   color: #f9f8ed;   
  74.   text-decoration: none;   
  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-weight: bold;   
  79.   padding: 12px 22px 12px 22px;   
  80.   line-height: normal;   
  81.   text-align: center;   
  82.   vertical-align: middle;   
  83.   cursor: pointer;   
  84.   text-transform: uppercase;   
  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.   display: block;   
  4.   background: #fff;   
  5.   padding: 12px 18px;   
  6.   max-width: 400px;   
  7.   margin: 0 auto;   
  8.   cursor: pointer;   
  9.   -webkit-border-radius: 3px;   
  10.   -moz-border-radius: 3px;   
  11.   border-radius: 3px;   
  12.   margin-bottom: 20px;   
  13.   box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px 0px;   
  14. }   
  15.   
  16. .notify h1 { margin-bottom: 6px; }   
  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.   display: block;   
  26.   text-align: center;   
  27.   margin-bottom: 10px;   
  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硬编码的盒子完全相同。

使用CSS3来制作消息提醒框

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3 完美实现圆角效果
Jul 13 HTML / CSS
css3动画效果小结(推荐)
Jul 25 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 HTML / CSS
利用CSS3制作简单的3d半透明立方体图片展示
Mar 25 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
Jul 20 HTML / CSS
HTML5 在canvas中绘制文本附效果图
Jun 23 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
May 20 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
Mar 15 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
Apr 08 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
Jun 15 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 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
相对定位(1) 匹配(1) geoserver(1) postcss-px2rem(1) 索引树扫描(1) lua(3) 绝对定位(1) ref(1) mixin(1) props(1)
You might like
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
php随机输出名人名言的代码
2012/10/07 PHP
关于PHP二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
教你php如何实现验证码
2016/01/20 PHP
PHPExcel在linux环境下导出报500错误的解决方法
2017/01/26 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
js 自制滚动条的小例子
2013/03/16 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
2014/02/04 Javascript
php的文件上传入门教程（实例讲解）
2014/04/10 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
JavaScript使用localStorage存储数据
2019/09/25 Javascript
[01:13]这，就是刀塔
2014/07/16 DOTA
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
python解析xml简单示例
2019/06/21 Python
Django forms表单 select下拉框的传值实例
2019/07/19 Python
pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)
2020/01/18 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
阿拉伯书店：Jamalon
2019/07/24 全球购物
送给程序员的20个Java集合面试问题
2014/08/06 面试题
打造完美自荐信
2014/01/24 职场文书
优秀中学生事迹材料
2014/01/31 职场文书
优秀大专毕业生求职信
2014/08/04 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
525心理健康活动总结
2015/05/08 职场文书
2015社区个人工作总结范文
2015/05/13 职场文书
求职自我评价参考范文
2019/05/16 职场文书