<rt id="bn8ez"></rt>
<label id="bn8ez"></label>
  • 

    • <span id="bn8ez"></span>
    

    <label id="bn8ez"><meter id="bn8ez"></meter></label>
    

    
    

    




    







												


        

    
	

    
	
    
		
    
			
                
    JAVA—咖啡館
    
				
    ——歡迎訪問rogerfan的博客，常來《JAVA——咖啡館》坐坐，喝杯濃香的咖啡，彼此探討一下JAVA技術，交流工作經(jīng)驗，分享JAVA帶來的快樂！本網(wǎng)站部分轉(zhuǎn)載文章，如果有版權問題請與我聯(lián)系。
    
			    		
		
    
	
    

    

    
	
    
		
    
		    
		        
		        BlogJava
首頁
新隨筆
聯(lián)系
聚合

管理

			
			
				

    
	
    
		
    
			
			
			
				 
				447 
				Posts ::
				145 Stories
				::
				368 Comments
				::
				0 Trackbacks
			
		
    
	
    

    

			    		
		
    
	
    

    


    



    
	
					

    
	
	
	
    
		
    jquery美化的填出提示對話框美化插件
    

     
    

    調(diào)用頁面:
    

     
    

    <!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=gb2312" />
    
    <title>JQuery插件:alert、confirm、prompt對話框插件-Download by http://www.jb51.net</title>
    
    <style type="text/css">
    
   BODY,
    
   HTML     {
    
    padding: 0px;
    
    margin: 0px;
    
   }
    
   BODY     {
    
    font    -family: Arial, Helvetica, sans-serif;
    
    font    -size: 12px;
    
    background: #FFF;
    
    padding: 15px;
    
   }
    
   
    
   H1     {
    
    font    -size: 20px;
    
    font    -weight: normal;
    
   }
    
   
    
   H2     {
    
    font    -size: 16px;
    
    font    -weight: normal;
    
   }
    
   
    
   FIELDSET     {
    
    border: solid 1px #CCC;
    
        -moz-border-radius: 16px;
    
        -webkit-border-radius: 16px;
    
    border    -radius: 16px;
    
    padding: 1em 2em;
    
    margin: 1em 0em;
    
   }
    
   
    
   LEGEND     {
    
    color: #    666;
    
    font    -size: 16px;
    
    padding: 0em .5em;
    
   }
    
   
    
   PRE     {
    
    font    -family: "Courier New", monospace;
    
    font    -size: 11px;
    
    color: #    666;
    
    background: #F8F8F8;
    
    padding: 1em;
    
        -moz-border-radius: 8px;
    
        -webkit-border-radius: 8px;
    
    border    -radius: 8px;
    
   }
    
   
    
       /* Custom dialog styles */
    
   #popup_container.style_1     {
    
    font    -family: Georgia, serif;
    
    color: #A4C6E2;
    
    background: #    005294;
    
    border    -color: #113F66;
    
   }
    
   
    
   #popup_container.style_1 #popup_title     {
    
    color: #FFF;
    
    font    -weight: normal;
    
    text    -align: left;
    
    background: #76A5CC;
    
    border: solid 1px #    005294;
    
    padding    -left: 1em;
    
   }
    
   
    
   #popup_container.style_1 #popup_content     {
    
    background: none;
    
   }
    
   
    
   #popup_container.style_1 #popup_message     {
    
    padding    -left: 0em;
    
   }
    
   
    
   #popup_container.style_1 INPUT[type    ='button'] {
    
    border: outset 2px #76A5CC;
    
    color: #A4C6E2;
    
    background: #3778AE;
    
   }
    
   
    
      </style>
    
  
    
      <!-- Dependencies -->
    
      <script src="jquery.js" type="text/javascript"></script>
    
      <script src="jquery.ui.draggable.js" type="text/javascript"></script>
    
  
    
      <!-- Core files -->
    
      <script src="jquery.alerts.js" type="text/javascript"></script>
    
      <link href="jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />
    
  
    
      <!-- Example script -->
    
      <script type="text/javascript">
    
   
    
   $(document).ready(     function() {
    
    
    
    $(    "#alert_button").click( function() {
    
     jAlert('This is a custom alert box', 'Alert Dialog');
    
    }    );
    
    
    
    $(    "#confirm_button").click( function() {
    
     jConfirm('Can you confirm     this?', 'Confirmation Dialog', function(r) {
    
      jAlert('Confirmed: '     + r, 'Confirmation Results');
    
     }    );
    
    }    );
    
    
    
    $(    "#prompt_button").click( function() {
    
     jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog',     function(r) {
    
          if( r ) alert('You entered ' + r);
    
     }    );
    
    }    );
    
    
    
    $(    "#alert_button_with_html").click( function() {
    
     jAlert('You can use HTML, such as     <strong>bold</strong>, <em>italics</em>, and <u>underline</u>!');
    
    }    );
    
    
    
    $(    ".alert_style_example").click( function() {
    
     $.alerts.dialogClass     = $(this).attr('id'); // set custom style class
    
         jAlert('This is the custom class called &ldquo;style_1&rdquo;', 'Custom Styles', function() {
    
      $.alerts.dialogClass     = null; // reset to default
    
         }    );
    
    }    );
    
   }    );
    
   
    
      </script>
    
  
    
     </head>
    
 
    
     <body>
    
  
    
      <h1>&laquo; jQuery Alert Dialogs (Alert, Confirm, &amp; Prompt Replacements)</h1>
    
  
    
      <h2>基本范例</h2>
    
  
    
      <fieldset>
    
       <legend>Alert</legend>
    
    <pre>
    
jAlert('This is a custom alert box', 'Alert Dialog');
    
    </pre>
    
       <p>
    
        <input id="alert_button" type="button" value="Show Alert" />
    
       </p>
    
      </fieldset>
    
  
    
  
    
      <fieldset>
    
       <legend>Confirm</legend>
    
    <pre>
    
jConfirm('Can you confirm     this?', 'Confirmation Dialog', function(r) {
    
    jAlert('Confirmed: '     + r, 'Confirmation Results');
    
}    );
    
    </pre>
    
       <p>
    
        <input id="confirm_button" type="button" value="Show Confirm" />
    
       </p>
    
      </fieldset>
    
  
    
      <fieldset>
    
       <legend>Prompt</legend>
    
    <pre>
    
jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog',     function(r) {
    
        if( r ) alert('You entered ' + r);
    
}    );
    
    </pre>
    
       <p>
    
        <input id="prompt_button" type="button" value="Show Prompt" />
    
       </p>
    
      </fieldset>
    
  
    
  
    
  
    
      <h2>高級范例</h2>
    
      <fieldset>
    
       <legend>對話框帶HTML代碼</legend>
    
    <pre>
    
jAlert('You can use HTML, such as     <strong>bold</strong>, <em>italics</em>, and <u>underline</u>!');
    
    </pre>
    
       <p>
    
        <input id="alert_button_with_html" type="button" value="Show Alert" />
    
       </p>
    
      </fieldset>
    
  
    
      <fieldset>
    
       <legend>Alternate Styles</legend>
    
       <p>
    
    By changing the value of the     <samp>$.alerts.dialogClass</samp> property (and creating
    
    your own CSS class), you can changes the style of your dialogs:
    
       </p>
    
   
    
       <p>
    
        <input id="style_1" class="alert_style_example" type="button" value="Style 1" />
    
       </p>
    
   
    
       <p>
    
    View the plugin source     for additional properties that can be modifed at runtime.
    
       </p>
    
      </fieldset>
    
    </body>
    
    </html>
    

    


    

	
    
	
	
    
		posted on 2010-10-25 10:55 rogerfan 閱讀(5844) 評論(1)  編輯  收藏  所屬分類: 【JQuery學習】 
	
    

    







    
	    
    


    

    
	
    Feedback
    
		
		
				
    			
					
    
						# re: 【轉(zhuǎn)】jQuery Alert contform 彈出提示對話框美化插件
							
								2015-03-02 16:20
							
						大叔
					
    
					
    
						是點發(fā)送到  回復  更多評論
						
    
						  
					
    
				
    
				
    
			

    




    





    


    

	
    
		
    
				
		
	
		
    
		
		
    只有注冊用戶登錄后才能發(fā)表評論。
    
		
    
			
		
    
			
		
    
		
		
    
		


    

		    		
		
    
		
    			
		
		
		
		
    
		
    
		
		
    
		
    
			網(wǎng)站導航:
		
		
    
		
    
			
		
    	
		
    
			 
		
    
		
    
			
		
    
		
    
			
				
		
    		
	
    	

    



    

				

    



    







    
        
	



主站蜘蛛池模板：
国产99久久亚洲综合精品|
亚洲欧洲精品久久|
亚洲AV乱码一区二区三区林ゆな|
国产aⅴ无码专区亚洲av|
中文字幕亚洲综合精品一区|
亚洲不卡视频在线观看|
国产偷国产偷亚洲清高APP|
国产精品成人啪精品视频免费|
免费福利电影在线观看|
噼里啪啦电影在线观看免费高清
|
成人无码区免费A∨直播|
日本人成在线视频免费播放|
日韩亚洲国产高清免费视频|
国产精品免费视频一区|
亚洲色精品vr一区二区三区|
亚洲影视一区二区|
免费的黄色的网站|
最近中文字幕免费mv在线视频|
国外成人免费高清激情视频|
亚洲香蕉网久久综合影视|
亚洲网红精品大秀在线观看|
MM1313亚洲精品无码久久|
国产偷伦视频免费观看|
成人免费淫片在线费观看|
中文亚洲AV片在线观看不卡|
亚洲av无码片在线观看|
亚州**色毛片免费观看|
国产91免费视频|
亚洲日韩中文字幕日韩在线
|
亚洲av日韩av不卡在线观看|
亚洲人成电影网站免费|
拍拍拍无挡免费视频网站|
成年人性生活免费视频|
国产亚洲色婷婷久久99精品|
亚洲熟女乱色一区二区三区|
免费无码av片在线观看|
精品免费久久久久久成人影院|
亚洲av永久无码精品国产精品|
日本亚洲欧美色视频在线播放|
久久午夜夜伦鲁鲁片无码免费|
国产成人涩涩涩视频在线观看免费
|