jQuery 弹出层弹出对话框

去山中嘘嘘

2014-01-22

jQuery 弹出层弹出对话框

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

XML/HTML Code
<div id="wrapper">  
<section>  
  <div class="container_6 clearfix">  
  <section class="main-section grid_6">  
<div class="main-content">  
  
<section class="clearfix">  
<div>  
<input id="alert" type="button" class="flat bgFix" value="alert('Hello!')" />  
<input id="ajax" type="button" class="flat bgFix" value="Ajax Content" />  
<input id="buttons" type="button" class="flat bgFix" value="Buttons" />  
<input id="small" type="button" class="flat bgFix" value="Small" />  
<input id="draggable" type="button" class="flat bgFix" value="Draggable" />  
<br />  
<br />  
<input id="wbgf" type="button" class="flat bgFix" value="White Fading Background" />  
<input id="bbgf" type="button" class="flat bgFix" value="Black Fading Background" />  
<br />  
<input id="bbg" type="button" class="flat bgFix" value="Black (or white!) Background" />  
<input id="nobg" type="button" class="flat bgFix" value="No Background" />  
<br />  
<input id="center" type="button" class="flat bgFix" value="Centered on Resize" />  
<script>  
                                        $(document).ready(function() {  
                                            ClassyLightbox.init({  
                                                override:true,  
                                                background: 'white',  
                                                centerOnResize: true,  
                                                fade: true  
                                            });   
                                            $('#alert').click(function() {  
                                                alert('Hello');  
                                            });  
                                            $('#hello').click(function() {  
                                                alert('Hello there, my name is ClassyLightbox. Pleasure meeting you.');  
                                            });   
                                            $('#ajax').click(function() {  
                                                ClassyLightbox.alert({  
                                                    width: '400px',  
                                                    title: 'Ajax Content',  
                                                    rightButtons: ['OK'],  
                                                    leftButtons: ['Close'],  
                                                    opened: function() {  
                                                        $('<span />').load('demo.html').appendTo('#lbContent');  
                                                    },  
                                                    onClick: function(button) {  
                                                        console.log(button);  
                                                    }  
                                                });  
                                            });   
                                            $('#buttons').click(function() {  
                                                ClassyLightbox.alert({  
                                                    width: '400px',  
                                                    title: 'Button Callbacks',  
                                                    rightButtons: ['No', 'Yes'],  
                                                    leftButtons: ['Close'],  
                                                    opened: function() {  
                                                        $('<span />').html("rightButtons: ['No', 'Yes'],<br />leftButtons: ['Close']<br />").appendTo('#lbContent');  
                                                    },  
                                                    onClick: function(button) {  
                                                        if (button != 'Close') {  
                                                            $('#ClassyLightbox #lbContent').append('<br />Clicked '+button);  
                                                        }  
                                                        console.log(button);  
                                                    }  
                                                });  
                                            });   
                                            $('#small').click(function() {  
                                                ClassyLightbox.alert({  
                                                    width: '200px',  
                                                    title: '200px',  
                                                    rightButtons: ['OK'],  
                                                    opened: function() {  
                                                        $('<span />').html("I am Small. <br />width: '200px',").appendTo('#lbContent');  
                                                    },  
                                                    onClick: function(button) {  
                                                        console.log(button);  
                                                    }  
                                                });  
                                            });  
                                            $('#draggable').click(function() {  
                                                ClassyLightbox.alert({  
                                                    width: '400px',  
                                                    title: 'Drag Me Up Here!',  
                                                    rightButtons: ['Cool!'],  
                                                    opened: function(){  
                                                        $('<span />').html("If jQuery UI is loaded, all windows will become draggable automagically!").appendTo('#lbContent');  
                                                    },  
                                                    onClick: function(button) {  
                                                        console.log(button);  
                                                        if (button == 'Cool!') {  
                                                            ClassyLightbox.clear();  
                                                        }  
                                                    }  
                                                });  
                                            });  
                                            $('#wbgf').click(function() {  
                                                ClassyLightbox.destroy();  
                                                ClassyLightbox.init({  
                                                    override:true,  
                                                    background: 'white',  
                                                    centerOnResize: false,  
                                                    fade: true  
                                                });  
                                                alert("Hello World");  
                                            });   
                                            $('#bbgf').click(function() {  
                                                ClassyLightbox.destroy();  
                                                ClassyLightbox.init({  
                                                    override:true,  
                                                    background: 'black',  
                                                    centerOnResize: false,  
                                                    fade: true  
                                                });  
                                                alert("Hello World");  
                                            });   
                                            $('#bbg').click(function() {  
                                                ClassyLightbox.destroy();  
                                                ClassyLightbox.init({  
                                                    override:true,  
                                                    background: ((Math.ceil(Math.random()*2))==2) ? 'white' : 'black',  
                                                    centerOnResize: false,  
                                                    fade: false  
                                                });  
                                                alert("My background doesn't have to fade in, it can be distracting at times.");  
                                            });   
                                            $('#nobg').click(function() {  
                                                ClassyLightbox.destroy();  
                                                ClassyLightbox.init({  
                                                    override:true,  
                                                    background: 'none',  
                                                    centerOnResize: true,  
                                                    fade:false  
                                                });  
                                                alert("I have no background");  
                                            });   
                                            $('#center').click(function() {  
                                                ClassyLightbox.destroy();  
                                                ClassyLightbox.init({  
                                                    override:true,  
                                                    background:'white',  
                                                    centerOnResize: true,  
                                                    fade: false  
                                                });  
                                                alert("Resize the window when I am open! I stay centered on resize.");  
                                            });   
                                        });  
                                    </script>   
</div>  
</section>  
</div>  
</section>  
</div>  
</section>  
</div>  