如何使用CSS3來制作消息提醒框

本篇內(nèi)容主要講解“如何使用CSS3來制作消息提醒框 ”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“如何使用CSS3來制作消息提醒框 ”吧!

成都創(chuàng)新互聯(lián)專注骨干網(wǎng)絡(luò)服務(wù)器租用十年，服務(wù)更有保障！服務(wù)器租用，德陽機房托管 成都服務(wù)器租用，成都服務(wù)器托管，骨干網(wǎng)絡(luò)帶寬，享受低延遲，高速訪問。靈活、實現(xiàn)低成本的共享或公網(wǎng)數(shù)據(jù)中心高速帶寬的專屬高性能服務(wù)器。

現(xiàn)代Web設(shè)計技術(shù)允許開發(fā)者快速實現(xiàn)大多數(shù)瀏覽器支持的動畫。我想警告消息是很常見的，因為默認(rèn)的JavaScript警告框的樣式往往（與你自己設(shè)計的漂亮樣式）很不協(xié)調(diào)很囧。這使開發(fā)者步入找出哪種解決方案能更好地實現(xiàn)更友好的用戶界面的道路。

如何使用CSS3來制作消息提醒框
    實際演示 – 下載源代碼

建立頁面

首先, 我們需要創(chuàng)建兩個文件命名為“index.html” 和 “style.css”. 我將從Google cdn上調(diào)用最新的jQuery 庫. HTML是非常簡單的,因為我們只需要在警告框里加入一些文本. 所有的JavaScript代碼被加在了頁面的底部,這樣可以節(jié)省HTTP請求時間.

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  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>  

頭部代碼設(shè)置了外部調(diào)用文件和 HTML5文檔規(guī)范 . 不是很復(fù)雜因為我們只是建立一個簡單的示例. 對于提示窗口我定義兩個不同的樣式 &ndash; 成功的和錯誤的. 還有一些其它風(fēng)格的例如警告框和信息框, 但是我沒有創(chuàng)建更多的,因為我更關(guān)注的是效果.

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <div id="content">  

  2.   <!-- Icons source http://dribbble.com/shots/913555-Flat-Web-Elements -->  

  3.   <div class="notify successbox">  

  4.     <h2>Success!</h2>  

  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.     <h2>Warning!</h2>  

  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 -->  

每個圖標(biāo)文件來自 免費的PSD 和UI作品. 這些圖標(biāo)被我調(diào)整為適當(dāng)?shù)拇笮?如何你需要警告/信息圖標(biāo)你可以變變顏色創(chuàng)建成你自己的. 這個類名 .notify 被添加到每一個消息DIV上. 它定義了DIV的陰影和字體類型.

其它的類例如 .successbox 和 .errorbox 充許我們改變顏色和alert窗口里的細(xì)節(jié). 你可以看到在我的測試頁里加載了兩個alert窗口. 每個頁面底部的按鈕點擊后可以在頁上下方追加一個新的alert窗口.
　CSS 盒子樣式

我不會將太多 CSS 重置的細(xì)節(jié)，那些在我之前的教程中很明了了。我創(chuàng)建了一個默認(rèn)的排版，并將內(nèi)置 #content 的div居中。這樣創(chuàng)建了一個允許jQuery在頁面最上面添加新警告元素的盒子區(qū)域。

CSS Code復(fù)制內(nèi)容到剪貼板

  1. /** typography **/  

  2. h2 {   

  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. h2 > 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. }  

讓效果更醒目的網(wǎng)頁布局非常簡單。任何熟悉前端網(wǎng)頁開發(fā)的人都應(yīng)該能夠?qū)⑵湟浦驳阶约旱臉邮奖碇?。我在這個扁平按鈕中使用了特殊的樣好似，并生成新的警告窗口。同樣的，我更新了每個 .notify類元素的內(nèi)部樣式。

CSS Code復(fù)制內(nèi)容到剪貼板

  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 h2 { margin-bottom: 6px; }   

  17.   

  18. .successbox h2 { color: #678361; }   

  19. .errorbox h2 { 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. }  

我設(shè)置了一些在我的布局示例中運行良好的默認(rèn)假設(shè)。所有消息通知窗口都被限定為 400px 寬，并通過使用 margin: 0 auto 在頁面中居中。同時，我更新了鼠標(biāo)圖標(biāo)為手指指針，這樣用戶就知道該元素可點擊。我們需要創(chuàng)建一個 jQuery 事件監(jiān)聽器以用于獲取用戶對取消通知窗口的點擊，并運行相應(yīng)函數(shù)。
　jQuery動畫

我的JS代碼實際執(zhí)行了兩個不同的操作。我們首先檢測包含在#content DIV中的任何現(xiàn)有.notify元素。一旦用戶點擊這個.notify框元素，我們需要淡出這個通知盒到透明度為0%（display: none），然后從DOM中移除()此元素。

JavaScript Code復(fù)制內(nèi)容到剪貼板

  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，而是在尋找這個內(nèi)容容器里面的任何.notify通知框。如果你查看一下jQuery的 .on() 方法文檔，你會注意到我們可以傳遞另外一個選擇器來作為第二個參數(shù)，它將在頁面被渲染后更新。 這是一個Stack Overflow里出色的帖子，它非常詳細(xì)地解釋了這個概念。

我的腳本的另一部分將會檢查用戶何時點擊了頁面下方的兩個按鈕之一。這兩個按鈕的ID是#newSuccessBox 和 #newAlertBox。無論用戶何時點擊，我們會停止加載HREF值的默認(rèn)行為，代之以創(chuàng)建一個新的HTML塊并前置在頁面上。

JavaScript Code復(fù)制內(nèi)容到剪貼板

  1. // handle the additional windows  

  2. $('#newSuccessBox').on('click', function(e){   

  3.   e.preventDefault();   

  4.   var samplehtml = $('<div class="notify successbox"> <h2>Success!</h2> <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"> <h2>Warning!</h2> <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. ;  

每個函數(shù)都有它自己的變量，來包含一個我用于警告框的HTML的復(fù)制/粘貼鏡像。這個HTML內(nèi)容存儲在一個字符串中用jQuery選擇器轉(zhuǎn)化為一個對象。我可以使用prependTo()方法選擇這個內(nèi)容DIV使新的警告框出現(xiàn)在頁面的最上方。所有新的盒子也可以同樣的方式被解除，因為它們的HTML代碼和用靜態(tài)HTML硬編碼的盒子完全相同。

到此，相信大家對“如何使用CSS3來制作消息提醒框 ”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

文章題目：如何使用CSS3來制作消息提醒框
文章路徑：http://bm7419.com/article2/geieic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、微信公眾號、網(wǎng)站收錄、ChatGPT、云服務(wù)器、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

手機網(wǎng)站建設(shè)