雖然說現在官方的自帶插件已經有很多了，但是有時候往往不能滿足我們的需求，下面我簡單介紹一些
常見的四種提示彈出框(success，loading，error，warning)，我分別用原生JavaScript和jQuery來介紹分享給各位博友！
一、首先介紹原生JavaScript來實現四種提示彈出框：
第一步：先看看html的建立
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JavaScript彈出對話框層提示插件</title> <script type="text/javascript" src="dialogPlugin.js"></script> <style> .a{display:block; width:50%; height:35px; line-height:35px; background-color:#333333; color:#fff; text-decoration:none; text-align:center; border-radius:8px; margin:10px auto 0;} </style> </head> <body> <a class="a" href="javascript:dialog_dialogShow('dialog_success','更新成功!');">提示更新成功</a> <a class="a" href="javascript:dialog_dialogShow('dialog_loading','內容加載!');">提示內容加載</a> <a class="a" href="javascript:dialog_dialogShow('dialog_warning','輸入有誤!');">提示輸入有誤</a> <a class="a" href="javascript:dialog_dialogShow('dialog_error','更新失敗!');">提示更新失敗</a> <a class="a" href="javascript:dialog_dialogShow('dialog_success','更新成功!',2,true);">提示更新成功2秒后自動關閉</a> <a class="a" href="javascript:dialog_dialogShow('dialog_loading','內容加載!',2,true);">提示內容加載2秒后自動關閉</a> <a class="a" href="javascript:dialog_dialogShow('dialog_warning','輸入有誤!',2,true);">提示輸入有誤2秒后自動關閉</a> <a class="a" href="javascript:dialog_dialogShow('dialog_error','更新失敗!',2,true);">提示更新失敗2秒后自動關閉</a> <a class="a" href="javascript:dialog_dialogShow('dialog_success','更新成功!',2,true,'http://www.cnblogs.com/jianyeLee/');">提示更新成功2秒后自動關閉后跳轉url</a> <a class="a" href="javascript:dialog_dialogShow('dialog_loading','內容加載!',2,true,'http://www.cnblogs.com/jianyeLee/');">提示內容加載2秒后自動關閉后跳轉url</a> <a class="a" href="javascript:dialog_dialogShow('dialog_warning','輸入有誤!',2,true,'http://www.cnblogs.com/jianyeLee/');">提示輸入有誤2秒后自動關閉后跳轉url</a> <a class="a" href="javascript:dialog_dialogShow('dialog_error','更新失敗!',2,true,'http://www.cnblogs.com/jianyeLee/');">提示更新失敗2秒后自動關閉后跳轉url</a> </body> </html>
第二步：編寫js文件
/** * 名稱：EthanCoco原生彈出對話框提示層插件 * 語言：原生JavaScript * 作者：EthanCoco * 博客：http://www.cnblogs.com/jianyeLee/ * 日期：2015-08-15 */ var dialog_timer; //定義全局變量； window.onload=function(){ //在這里我們沒有把css單獨放在一個css文件當中，而是通過js來創建
//在 cssText中，我們有#dialog_layer的div（不過被我去掉了，無影響）
//dialog_dialog的div.用於彈出提示框的對話層
//dialog_success的class，用於“成功”的提示彈出框樣式
//dialog_loading的class，用於“加載”的提示彈出框樣式
//dialog_warning的class，用於“警告”的提示彈出框樣式
//dialog_error的class，用於“錯誤”的提示彈出框樣式 var cssText="html,body{height:100%;width:100%;padding:0px;margin:0px;}#dialog_layer{background-color:#000;postion:fixed;left:0;top:0;width:200px;height:100px;z-index:999999;display:none;background-color:rgba(0,0,0,0.6);}#dialog_dialog{width:200px;height:100px;text-align:center;border-radius:8px;position:fixed;left:50%;top:50%;margin-left:-106px;margin-top:-56px;z-index:10000000;background-color:#fff;background-repeat:no-repeat;line-height:140px;font-size:14px;font-weight:bold;display:none;letter-spacing:1px;}.dialog_success{background-image:url('images/success.png');color:#1fce11;background-size:32px 32px;background-position:center 20px;border:6px #1fce11 solid;}.dialog_loading{background-image:url('images/loading.gif');color:#333333;background-size:50px 50px;background-position:center 15px;border:6px #333333 solid;}.dialog_warning{background-image:url('images/warning.png');color:#F90;background-size:32px 32px;background-position:center 20px;border:6px #F90 solid;}.dialog_error{background-image:url('images/error.png');color:#F00;background-size:32px 32px;background-position:center 20px;border:6px #F00 solid;}"; //創建css樣式 createStyle(cssText); //createStyle(content)函數用於創建css樣式（在下面） //創建遮罩層 // var dialog_layer_div = document.createElement('div'); // dialog_layer_div.setAttribute('id','dialog_layer'); // document.body.appendChild(dialog_layer_div); //創建對話層 var dialog_dialog_div=document.createElement('div'); //創建div dialog_dialog_div.setAttribute('id','dialog_dialog'); //設置div的id為“dialog_dialog” document.body.appendChild(dialog_dialog_div); //把div加載到html頁面的body中去 } function createStyle(content){ //創建“創建css樣式”的函數 //創建樣式節點， 相當於<style type="text/css">里面就是cssText了</style> var style=document.createElement("style"); style.setAttribute("type", "text/css"); if(style.styleSheet){// IE style.styleSheet.cssText = content; } else {// w3c var cssText = document.createTextNode(content); style.appendChild(cssText); } //獲取頭部標簽對象 var heads = document.getElementsByTagName("head"); if(heads.length){ heads[0].appendChild(style); }else{ document.documentElement.appendChild(style); } } /** * @Description 彈出對話框層 * @param className 樣式名稱（成功：dialog_success，失敗：dialog_error，加載：dialog_loading，警告：dialog_warning） * @param content 提示內容 * @param timeout 定時關閉時間 * @param flag 是否自動關閉 * @param url 對話框關閉時跳轉的url * @return */ function dialog_dialogShow(className,content,timeout,flag,url){ //獲取遮罩層對象 // var dialog_layer = document.getElementById("dialog_layer"); //獲取對話框層對象 var dialog_dialog = document.getElementById("dialog_dialog"); timeout = timeout || 3; //設置時間參數的默認值3秒 flag = flag || false; //設置默認flag標志位false，來控制時間和URL url = url || ""; //設默認URL跳轉頁面的地址為空 dialog_dialog.className = className; //className為四種提示彈出框的class名稱 dialog_dialog.innerHTML = content; //彈出框中顯示的提示字符 dialog_dialog.style.display = "block"; //把顯示樣式設為塊級 // dialog_layer.style.display = "block"; if(flag){ //判斷是否關閉對話層
//setTnterval(functionName，time);的作用是不停的調用某個函數（只寫函數名稱），以time的頻率 dialog_timer = window.setInterval(function(){ dialog_dialogClose(url); // 關閉對話層 window.clearInterval(dialog_timer); //與setInterval()相對的，直到clearInterval()出現，就停止setInterval（） },timeout*1000); } } /** * @Description 關閉對話框層 * @param url 關閉層時跳轉的url * @return */ function dialog_dialogClose(url){ //獲取遮罩層對象 // var dialog_layer = document.getElementById("dialog_layer"); //獲取對話框層對象 var dialog_dialog = document.getElementById("dialog_dialog"); url = url || ""; dialog_dialog.style.display = "none"; // dialog_layer.style.display = "none"; if(url!=""){ //如果URL不為空就跳轉到指定的頁面 window.location.href = url; //在div-css的細節里面講過，window.location.href="";這個要記住，經常用到的 } }
原生的JavaScript提示彈出框就好了 這里的頁面展現就不占用空間了，文章末尾有代碼的整個原文提取碼，感興趣的博友可以去下載實驗
二、現在介紹一下jQuery寫的提示彈出框（有jQueryUI輔助）
第一步：編寫html代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>dialog提示彈出框</title> <script type="text/javascript" src="../js/jquery.js"></script> <script type="text/javascript" src="../js/jquery.ui.js"></script> //引入jQueryUI樣式來輔助 <script type="text/javascript" src="ethanDialog.js"></script> <link href="ethanDialog.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="ethan_dialog"> <a class="a1" href="#">提示更新成功(URL)</a> <a class="a2" href="#">提示內容加載</a> <a class="a3" href="#">提示輸入有誤</a> <a class="a4" href="#">提示更新失敗</a> </div> //下面是四個提示彈出框的模塊 <div class="ethan_success"> <span>更新成功</span><br/> <img src="images/success.png" class="ethan_img"> </div> <div class="ethan_loading"> <span>內容加載</span><br/> <img src="images/loading.gif" class="ethan_img"> </div> <div class="ethan_warning"> <span>輸入有誤</span><br/> <img src="images/warning.png" class="ethan_img"> </div> <div class="ethan_error"> <span>更新失敗</span><br/> <img src="images/error.png" class="ethan_img"> </div> </body> </html>
第二步：編寫css文件
html,body{ width:100%; height:100%; margin:0; padding:0; } .a1,.a2,.a3,.a4{ display:block; width:300px; height:35px; line-height:35px; background-color:green; color:#red; text-decoration:none; text-align:center; border-radius:8px; margin:10px auto 0; } .ethan_success,.ethan_loading,.ethan_warning,.ethan_error{ background : lightblue; text-align:center; } .ethan_success,.ethan_loading,.ethan_warning,.ethan_error span{ line-height :25px; font-size: 14px; font-weight : bold; color : green; } .ethan_success .ethan_img{ margin-top : 20px; } .ethan_loading .ethan_img{ margin-top : 0px; } .ethan_warning .ethan_img{ margin-top : 20px; } .ethan_error .ethan_img{ margin-top : 20px; }
css的樣式都很簡單 就不多說了
第三步：編寫js代碼文件
/** * 名稱：EthanCoco原創彈出對話框提示層插件ethanDialog * 語言：jQuery，jQueryUI輔助 * 作者：EthanCoco * 博客：http://www.cnblogs.com/jianyeLee/ * 日期：2015-08-15 */ //養成好的習慣，在寫jQuery代碼的時候，記得最好在前面加個“分號” ;$(function(){
//當點擊class為a1的時候，執行 $('.ethan_success').dialog('open');把提示框打開，
// setTimeout（）是設置時間的 $('#ethan_dialog .a1').click(function(){ //當點擊的時候， $('.ethan_success').dialog('open'); //打開dialog對話框 setTimeout(function(){ //當時間為2秒的時候，關閉對話框，並跳轉指定的頁面 $('.ethan_success').dialog('close'); window.location.href='http://www.cnblogs.com/jianyeLee/'; },2000); }); $('#ethan_dialog .a2').click(function(){ $('.ethan_loading').dialog('open'); setTimeout(function(){ $('.ethan_loading').dialog('close'); },2000); }); $('#ethan_dialog .a3').click(function(){ $('.ethan_warning').dialog('open'); setTimeout(function(){ $('.ethan_warning').dialog('close'); },2000); }); $('#ethan_dialog .a4').click(function(){ $('.ethan_error').dialog('open'); setTimeout(function(){ $('.ethan_error').dialog('close'); },2000); }); /** * @Description 初始化彈出對話框層 * @author EthanCoco * @Date 2015-08-15 * @param className 樣式名稱（成功：ethan_success，加載：ethan_loading，警告：ethan_warning，失敗：ethan_error） */ $('.ethan_success,.ethan_loading,.ethan_warning,.ethan_error').dialog({ autoOpen : false, modal : true, closeOnEscape : false, resizable : false, draggable : false, hide: 'blind', width : 200, height : 100, }).parent().find('.ui-widget-header').hide(); //這個parent().find('.ui-widget-header').hide();需要一點技巧，下面介紹一下 });
解析此行代碼的意思：parent().find('.ui-widget-header').hide();
我們先把這行代碼去掉，看看樣式成了怎么樣的：
看到這個一個close按鈕在那里，是非常難看的，再說我們設置了time自動關閉，就不需要這個手動關閉按鈕了，現在我們怎么去掉他呢，來看
我們在網頁中：右鍵——審查元素，在網頁下面如下顯示，我們切換到Elements,如圖：
然后我們用鼠標點擊到彈出框，我們在下面會看到相應的顏色對應，
我們在下面找到提示框的button按鈕close：如圖
找到了他對應的close按鈕，然后.parent()是他的父級，也就是第一個箭頭所指的div，然后，find()他的class，那么多class，到底用哪個呢，其實都可以，然后hide()隱藏它，不要他就可以了；
這個模塊的di本來是沒有的 是通過jQueryUI在初始化dialog的時候加進去的。
所以有時候要改jQueryUI自帶的樣式，要學會如何找他，這是一個技巧，經常用的。
我的源碼：
http://yunpan.cn/cd5zwNZmcY9vh （提取碼：a7f7）
/*
*作者：EthanCoco
*2015-08-16 01:39:28
*郵箱：lijianlin0204@163.com
*/