首页>>Jquery文字>>jQuery 弹出层 弹出对话框(2013-12-03)

jQuery 弹出层 弹出对话框

 可以设置大小,ajax内容弹出,背景等各种调整

jQuery 弹出层 弹出对话框
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="wrapper">  
  2. <section>  
  3.   <div class="container_6 clearfix">  
  4.   <section class="main-section grid_6">  
  5. <div class="main-content">  
  6.   
  7. <section class="clearfix">  
  8. <div>  
  9. <input id="alert" type="button" class="flat bgFix" value="alert('Hello!')" />  
  10. <input id="ajax" type="button" class="flat bgFix" value="Ajax Content" />  
  11. <input id="buttons" type="button" class="flat bgFix" value="Buttons" />  
  12. <input id="small" type="button" class="flat bgFix" value="Small" />  
  13. <input id="draggable" type="button" class="flat bgFix" value="Draggable" />  
  14. <br />  
  15. <br />  
  16. <input id="wbgf" type="button" class="flat bgFix" value="White Fading Background" />  
  17. <input id="bbgf" type="button" class="flat bgFix" value="Black Fading Background" />  
  18. <br />  
  19. <input id="bbg" type="button" class="flat bgFix" value="Black (or white!) Background" />  
  20. <input id="nobg" type="button" class="flat bgFix" value="No Background" />  
  21. <br />  
  22. <input id="center" type="button" class="flat bgFix" value="Centered on Resize" />  
  23. <script>  
  24.                                         $(document).ready(function() {  
  25.                                             ClassyLightbox.init({  
  26.                                                 override:true,  
  27.                                                 background: 'white',  
  28.                                                 centerOnResize: true,  
  29.                                                 fade: true  
  30.                                             });   
  31.                                             $('#alert').click(function() {  
  32.                                                 alert('Hello');  
  33.                                             });  
  34.                                             $('#hello').click(function() {  
  35.                                                 alert('Hello there, my name is ClassyLightbox. Pleasure meeting you.');  
  36.                                             });   
  37.                                             $('#ajax').click(function() {  
  38.                                                 ClassyLightbox.alert({  
  39.                                                     width: '400px',  
  40.                                                     title: 'Ajax Content',  
  41.                                                     rightButtons: ['OK'],  
  42.                                                     leftButtons: ['Close'],  
  43.                                                     opened: function() {  
  44.                                                         $('<span />').load('demo.html').appendTo('#lbContent');  
  45.                                                     },  
  46.                                                     onClick: function(button) {  
  47.                                                         console.log(button);  
  48.                                                     }  
  49.                                                 });  
  50.                                             });   
  51.                                             $('#buttons').click(function() {  
  52.                                                 ClassyLightbox.alert({  
  53.                                                     width: '400px',  
  54.                                                     title: 'Button Callbacks',  
  55.                                                     rightButtons: ['No', 'Yes'],  
  56.                                                     leftButtons: ['Close'],  
  57.                                                     opened: function() {  
  58.                                                         $('<span />').html("rightButtons: ['No', 'Yes'],<br />leftButtons: ['Close']<br />").appendTo('#lbContent');  
  59.                                                     },  
  60.                                                     onClick: function(button) {  
  61.                                                         if (button != 'Close') {  
  62.                                                             $('#ClassyLightbox #lbContent').append('<br />Clicked '+button);  
  63.                                                         }  
  64.                                                         console.log(button);  
  65.                                                     }  
  66.                                                 });  
  67.                                             });   
  68.                                             $('#small').click(function() {  
  69.                                                 ClassyLightbox.alert({  
  70.                                                     width: '200px',  
  71.                                                     title: '200px',  
  72.                                                     rightButtons: ['OK'],  
  73.                                                     opened: function() {  
  74.                                                         $('<span />').html("I am Small. <br />width: '200px',").appendTo('#lbContent');  
  75.                                                     },  
  76.                                                     onClick: function(button) {  
  77.                                                         console.log(button);  
  78.                                                     }  
  79.                                                 });  
  80.                                             });  
  81.                                             $('#draggable').click(function() {  
  82.                                                 ClassyLightbox.alert({  
  83.                                                     width: '400px',  
  84.                                                     title: 'Drag Me Up Here!',  
  85.                                                     rightButtons: ['Cool!'],  
  86.                                                     opened: function(){  
  87.                                                         $('<span />').html("If jQuery UI is loaded, all windows will become draggable automagically!").appendTo('#lbContent');  
  88.                                                     },  
  89.                                                     onClick: function(button) {  
  90.                                                         console.log(button);  
  91.                                                         if (button == 'Cool!') {  
  92.                                                             ClassyLightbox.clear();  
  93.                                                         }  
  94.                                                     }  
  95.                                                 });  
  96.                                             });  
  97.                                             $('#wbgf').click(function() {  
  98.                                                 ClassyLightbox.destroy();  
  99.                                                 ClassyLightbox.init({  
  100.                                                     override:true,  
  101.                                                     background: 'white',  
  102.                                                     centerOnResize: false,  
  103.                                                     fade: true  
  104.                                                 });  
  105.                                                 alert("Hello World");  
  106.                                             });   
  107.                                             $('#bbgf').click(function() {  
  108.                                                 ClassyLightbox.destroy();  
  109.                                                 ClassyLightbox.init({  
  110.                                                     override:true,  
  111.                                                     background: 'black',  
  112.                                                     centerOnResize: false,  
  113.                                                     fade: true  
  114.                                                 });  
  115.                                                 alert("Hello World");  
  116.                                             });   
  117.                                             $('#bbg').click(function() {  
  118.                                                 ClassyLightbox.destroy();  
  119.                                                 ClassyLightbox.init({  
  120.                                                     override:true,  
  121.                                                     background: ((Math.ceil(Math.random()*2))==2) ? 'white' : 'black',  
  122.                                                     centerOnResize: false,  
  123.                                                     fade: false  
  124.                                                 });  
  125.                                                 alert("My background doesn't have to fade in, it can be distracting at times.");  
  126.                                             });   
  127.                                             $('#nobg').click(function() {  
  128.                                                 ClassyLightbox.destroy();  
  129.                                                 ClassyLightbox.init({  
  130.                                                     override:true,  
  131.                                                     background: 'none',  
  132.                                                     centerOnResize: true,  
  133.                                                     fade:false  
  134.                                                 });  
  135.                                                 alert("I have no background");  
  136.                                             });   
  137.                                             $('#center').click(function() {  
  138.                                                 ClassyLightbox.destroy();  
  139.                                                 ClassyLightbox.init({  
  140.                                                     override:true,  
  141.                                                     background:'white',  
  142.                                                     centerOnResize: true,  
  143.                                                     fade: false  
  144.                                                 });  
  145.                                                 alert("Resize the window when I am open! I stay centered on resize.");  
  146.                                             });   
  147.                                         });  
  148.                                     </script>   
  149. </div>  
  150. </section>  
  151. </div>  
  152. </section>  
  153. </div>  
  154. </section>  
  155. </div>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_137.html