蝙蝠岛资源网

使用CSS3来制作消息提醒框
网页制作 2024/12/24 佚名
2 0
蝙蝠岛资源网 Design By www.hbtsch.com

现代Web设计技术允许开发者快速实现大多数浏览器支持的动画。我想警告消息是很常见的，因为默认的JavaScript警告框的样式往往（与你自己设计的漂亮样式）很不协调很囧。这使开发者步入找出哪种解决方案能更好地实现更友好的用户界面的道路。

使用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,提醒框
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

评论“使用CSS3来制作消息提醒框”

暂无使用CSS3来制作消息提醒框的评论...
www.hbtsch.com 蝙蝠岛资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源
一句话新闻
一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2024/12/24

这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。

一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。

另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
蝙蝠岛资源网 Design By www.hbtsch.com