应用CSS3来制做信息提示框

日期：2020-12-12 类型：科技新闻 

关键词：如何制作微信小程序，微信小程序源码，小程序码生成，凡科网微信小程序，微信公众号小程序

当代Web设计方案技术性容许开发设计者迅速完成大多数数访问器适用的动漫。我想警示信息是很普遍的，由于默认设置的JavaScript警示框的款式常常（与你自身设计方案的好看款式）很不融洽很囧。这使开发设计者步入找出哪样处理计划方案能更好地完成更友善的客户页面的路面。


    具体演试 – 免费下载源码

创建网页页面

　　最先, 大家必须建立两个文档取名为“index.html” 和 “style.css”. 我将从Google CDN上启用全新的jQuery 库. HTML是是非非常简易的,由于大家只必须在警示框里添加1些文字. 全部的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⑻">  
  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文本文档标准 . 并不是很繁杂由于大家只是创建1个简易的示例. 针对提醒对话框我界定两个不一样的款式 – 取得成功的和不正确的. 也有1些其它设计风格的比如警示框和信息内容框, 可是我沒有建立更多的,由于我更关心的是实际效果.

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对话框. 每一个网页页面底部的按钮点一下后能够在页左右方追加1个新的alert对话框.
　CSS 盒子款式

　　我不容易将太多 CSS 重设的细节，那些在我以前的实例教程中很明了了。我建立了1个默认设置的排版，并将内嵌 #content 的div垂直居中。这样建立了1个容许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 ⑸0%;   
  28. }   
  29. h1:after {       
  30.   left: .5em;   
  31.   margin: 0 ⑸0% 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. }  

　　我设定了1些在我的合理布局示例中运作优良的默认设置假定。全部信息通告对话框都被限制为 400px 宽，并根据应用 margin: 0 auto 在网页页面中垂直居中。另外，我升级了电脑鼠标标志为手指指针，这样客户就了解该元素可点一下。大家必须建立1个 jQuery 恶性事件监视器以用于获得客户对撤销通告对话框的点一下，并运作相应涵数。
　jQuery动漫

　　我的JS编码具体实行了两个不一样的实际操作。大家最先检验包括在#content DIV中的任何现有.notify元素。1旦客户点一下这个.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通告框。假如你查询1下jQuery的 .on() 方式文本文档，你会留意到大家能够传送此外1个挑选器来做为第2个主要参数，它将在网页页面被3D渲染后升级。 这是1个Stack Overflow里优异的帖子，它十分详尽地解释了这个定义。

　　我的脚本制作的另外一一部分可能查验客户什么时候点一下了网页页面正下方的两个按钮之1。这两个按钮的ID是#newSuccessBox 和 #newAlertBox。不管客户什么时候点一下，大家会终止载入HREF值的默认设置个人行为，代之以建立1个新的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. ;  

　　每一个涵数都有它自身的自变量，来包括1个我用于警示框的HTML的拷贝/粘贴镜像系统。这个HTML內容储存在1个标识符串选用jQuery挑选器转换为1个目标。我可使用prependTo()方式挑选这个內容DIV使新的警示框出現在网页页面的最上方。全部新的盒子还可以一样的方法被消除，由于它们的HTML编码和用静态数据HTML硬编号的盒子彻底同样。

上一篇：应用CSS3完成选项卡切换的方式 返回下一篇：浅谈CSS Sprites切图技术性