JQuery Pop-up layer Pop-up dialog box

JQuery Pop-up layer Pop-up dialog box

Can be set size, Ajax content pop-up, background, and so on various adjustments

Demonstrate

Xml/html Code

3. • • • <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 with you. ');
       • });
       • $ (' #ajax '). Click (function () {
       • Classylightbox.alert ({
       • Width: ' 400px ',
       • Title: ' Ajax Content ',
       • Rightbuttons: [' OK '],
       • Leftbuttons: [' Close '],
       • Opened:function () {
       • $ ('). 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 () {
       • $ ('). HTML ("rightbuttons: [' No ', ' Yes '],
         Leftbuttons: [' Close ']
         "). Appendto (' #lbContent ');
       • },
       • Onclick:function (Button) {
       • if (Button!= ' close ') {
       • $ (' #ClassyLightbox #lbContent '). Append ('
         Clicked ' +button);
       • }
       • Console.log (button);
       • }
       • });
       • });
       • $ (' #small '). Click (function () {
       • Classylightbox.alert ({
       • Width: ' 200px ',
       • Title: ' 200px ',
       • Rightbuttons: [' OK '],
       • Opened:function () {
       • $ ('). HTML (' I am Small.
         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 () {
       • $ ('). HTML ("If jQuery UI is loaded, all Windows'll 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 is 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>