首页
所有分类
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美化表单控件全集
Jun 29 HTML / CSS
发现两个有趣的CSS3动画效果
Aug 14 HTML / CSS
CSS实现限制字数功能当对象内文本溢出时显示省略标记
Aug 20 HTML / CSS
CSS3制作苹果风格键盘特效
Feb 26 HTML / CSS
CSS3制作气泡对话框的实例教程
May 10 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
Sep 05 HTML / CSS
HTML5 与 XHTML2
Oct 17 HTML / CSS
HTML5头部标签的一些常用信息小结
Oct 23 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
Jun 13 HTML / CSS
html5简介及新增功能介绍
May 18 HTML / CSS
css 中多种边框的实现小窍门
Apr 07 HTML / CSS
css中有哪些方式可以隐藏页面元素及区别
Jun 16 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
update(2) 数据库卡死(1) 贪吃蛇(2) 索尼ICF-36(1) 德生2P3(1) 备份(2) python小游戏(5) 全局锁(1) 索引(8) SnakeGame(1)
You might like
php面向对象的方法重载两种版本比较
2008/09/08 PHP
php中spl_autoload详解
2014/10/17 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
为Extjs加加速(javascript加速)
2010/08/19 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
Node.js中文件操作模块File System的详细介绍
2017/01/05 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
详解vue中async-await的使用误区
2018/12/05 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
2019/11/10 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
2020/11/04 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
Python标准库之itertools库的使用方法
2017/09/07 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
【python】matplotlib动态显示详解
2019/04/11 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
代码实例讲解python3的编码问题
2019/07/08 Python
Python实现名片管理系统
2020/02/14 Python
网络工程师个人的自我评价范文
2013/10/01 职场文书
初三政治教学反思
2014/01/30 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
优秀员工推荐信
2014/05/10 职场文书
电子商务专业毕业生求职信
2014/06/12 职场文书
房产授权委托书范本
2014/09/22 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
忠诚与背叛观后感
2015/06/04 职场文书
小学课改工作总结
2015/08/13 职场文书
Redis安装启动及常见数据类型
2021/04/14 Redis
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python