jquery仿alert提示框、confirm確認對話框、prompt帶輸入的提示框插件實例演示
第一步：引入所需要的jquery插件文件：
http://www.angelweb.cn/Inc/eg/jquery.alerts.js
第二步：引入所需的樣式：
#popup_container {font-family: Arial, sans-serif;font-size: 12px;min-width: 300px;max-width: 600px;background:#FFF;border:solid 5px #999;color:#000;-moz-border-radius:5px;-webkit-border-radius: 5px;border-radius: 5px;}
#popup_title {font-size:14px;font-weight:bold;text-align:center;line-height:1.75em;color:#666;background: #CCC url(/images/eg/title.gif) top repeat-x;border: solid 1px #FFF;border-bottom: solid 1px #999;cursor: default;padding:0em;margin:0em auto;}
#popup_content {background:16px 16px no-repeat url(/images/eg/info.gif);padding: 1em 1.75em;margin: 0em;}
#popup_content.alert {background-image: url(/images/eg/info.gif);}
#popup_content.confirm {background-image: url(/images/eg/important.gif);}
#popup_content.prompt {background-image: url(/images/eg/help.gif);}
#popup_message {padding-left: 48px;}
#popup_panel {text-align: center;margin:1em 0em 0em 1em;}
#popup_prompt {margin:.5em 0em;}
注意把上面樣式中的圖片先保存到本地，然后替換成自己的路徑！
第三步：就可以直接引用了，看下面簡單的實例：
$("#alert_button").click( function() {
jAlert('這是一個可自定義樣式的警告對話框', '警告對話框');
});
$("#confirm_button").click( function(){
jConfirm('你確定這么做嗎?', '確認對話框',function(r){
jAlert('是否確定 ' + r, '確定內容');
});
});
$("#prompt_button").click( function(){
jPrompt('輸入字符:', '這里是默認值', '帶輸入框的提示框', function(r) {
if( r ){alert('你輸入的是 ' + r)};
});
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>zhezhaoceng.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript" src="<%=contextPath %>/core/js/jquery/jquery-1.4.2.js"></script> <script type="text/javascript" src="jquery.alerts.js"></script> <style> #popup_container {font-family: Arial, sans-serif;font-size: 12px;min-width: 300px;max-width: 600px;background:#FFF;border:solid 5px #999;color:#000;-moz-border-radius:5px;-webkit-border-radius: 5px;border-radius: 5px;} #popup_title {font-size:14px;font-weight:bold;text-align:center;line-height:1.75em;color:#666;background: #CCC url(/images/eg/title.gif) top repeat-x;border: solid 1px #FFF;border-bottom: solid 1px #999;cursor: default;padding:0em;margin:0em auto;} #popup_content {background:16px 16px no-repeat url(/images/eg/info.gif);padding: 1em 1.75em;margin: 0em;} #popup_content.alert {background-image: url(/images/eg/info.gif);} #popup_content.confirm {background-image: url(/images/eg/important.gif);} #popup_content.prompt {background-image: url(/images/eg/help.gif);} #popup_message {padding-left: 48px;} #popup_panel {text-align: center;margin:1em 0em 0em 1em;} #popup_prompt {margin:.5em 0em;} </style> <script type="text/javascript"> $("#alert_button").click( function() { jAlert('這是一個可自定義樣式的警告對話框', '警告對話框'); }); $("#confirm_button").click( function(){ jConfirm('你確定這么做嗎?', '確認對話框',function(r){ jAlert('是否確定 ' + r, '確定內容'); }); }); $("#prompt_button").click( function(){ jPrompt('輸入字符:', '這里是默認值', '帶輸入框的提示框', function(r) { if( r ){alert('你輸入的是 ' + r)}; }); }); </script> </head> <body> <div id="Con" class="ConDiv"> <fieldset> <legend>警告提示框（Alert）</legend> <pre> $("#alert_button").click( function() { jAlert('這是一個可自定義樣式的警告對話框', '警告對話框'); }); </pre> <p> <input id="alert_button" type="button" value="警告提示框"> </p> </fieldset> <script language="javascript"> $(function(){ $("#alert_button").click( function() { jAlert('這是一個可自定義樣式的警告對話框', '警告對話框'); }); }); </script> <fieldset> <legend>確認對話框（Confirm）</legend> <pre> $("#confirm_button").click( function(){ jConfirm('你確定這么做嗎?', '確認對話框',function(r){ jAlert('是否確定 ' + r, '確定內容'); }); }); </pre> <p> <input id="confirm_button" type="button" value="確認對話框"> </p> </fieldset> <script language="javascript"> $(function(){ $("#confirm_button").click( function(){ jConfirm('你確定這么做嗎?', '確認對話框',function(r){ jAlert('是否確定 ' + r, '確定內容'); }); }); }); </script> <fieldset> <legend>帶輸入的提示框（Prompt）</legend> <pre> jPrompt('輸入字符:', '這里是默認值', '帶輸入框的提示框', function(r) { if( r ) alert('你輸入的是 ' + r); }); </pre> <p> <input id="prompt_button" type="button" value="帶輸入框的提示框"> </p> </fieldset> <script language="javascript"> $(function(){ $("#prompt_button").click( function(){ jPrompt('輸入字符:', '這里是默認值', '帶輸入框的提示框', function(r) { if( r ){alert('你輸入的是 ' + r)}; }); }); }); </script> <fieldset> <legend>帶HTML輸出效果的對話框</legend> <pre> jAlert('你可以使用HTML標簽，比如 <strong>加粗</strong>, <em>斜體</em>，和 <u>下划線</u>!'); </pre> <p> <input id="alert_button_with_html" type="button" value="顯示帶有HTML標簽效果的彈出框"> </p> </fieldset> <script language="javascript"> $(function(){ $("#alert_button_with_html").click( function(){ jAlert('你可以使用HTML標簽，比如 <strong>加粗</strong>, <em>斜體</em>，和 <u>下划線</u>!'); }); }); </script> </div> </body> </html>