/* Go to the official website to download the latest JS Http://sentsin.com/jquery/layer/① reference Jquery② reference layer.min.js*/trigger layer events can be freely bound, such as: $ (' #id '). On (' click ', function () {layer.msg (' Test ');}); The following is the main example of the call code: "Information box": layer.alert (' cabbage-level front siege Morokata Heart ', 8); Style a layer.msg (' Front siege morokata Heart '); Style two//Of course, far more than these two styles. "Inquiry box": $.layer ({shade: [0], area: [' Auto ', ' Auto '], dialog: {msg: ' What do you think of front-end development? ', Btns:2, Type:4, btn: [' important ', ' wonderful '], yes:function () {LAYER.M SG (' Important ', 1, 1); }, No:function () {layer.msg (' wonderful ', 1, 13); }});//can also be used layer.confirm () Shortcut call "page layer One" $.layer ({type:1, shade: [0], area: [' Auto ', ' Auto '], Title:false, border: [0], page: {dom: '. Layer_notice '}}); "Page Layer Two" var pageii = $.layer ({type:1, title:false, area: [' Auto ', ' auto '], border: [0],//Remove default border shade: [0],//Remove mask closebtn: [0, FALSE],//Remove default Close button shift: ' Left ',//Popup Page: {html: ' <div style= ' width:420px; height:260px; padding:20px; border:1PX Solid #ccc; Background-color: #eee; " ><p> I came from the left, and I set my own style. </p><button id= "pagebtn" class= "Btns" onclick= "" > Close </button></div> '}});//self-set off $ (' #pagebtn ' ). On (' click ', Function () {layer.close (PAGEII);}); "IFRAME Layer One" $.layer ({type:2, shadeclose:true, Title:false, closebtn: [0, False], shade: [0.8, ' #000 '], border: [0], offset: [' 20px ', '], area: [' 1000px ', ($ (window). Height () + ' px '], iframe: {src: ' http://f2e.s Entsin.com/chat '}}); "IFRAME Layer Two" layer.tips (' 5 seconds after the lower right corner of the window automatically closes and generates a new IFrame ', this, {time:5, maxwidth:260}); $.layer ({type:2, closebt N:false, Shadeclose:true, shade: [0.1, ' #fff '], border: [0], Time:5, iframe: {src: ' test/guodu.h Tml '}, Title:false, area: [' 300px ', ' 250px '], shift: ' Right-bottom ', end:function () {$.layer ({ Type:2, title: ' Yin Xin Blog-sentsin.com ', Shadeclose:true, Maxmin:true, Fix:false, Area: [' 1024px ', +], iframe: {src: ' http://sentsin.com/' } }); }}); "Load Layer One" layer.load (3); "Loading Layer Two" layer.load (' Loading with text ', 3); "Tips Layer One" layer.tips (' tips ' style is not fixed, you can customize the appearance. ', this, {style: [' Background-color: #78BA32; color: #fff ', ' #78BA32 '], maxwidth:185, Time:3, Closebtn:[0, Tru E]}); "Tips Layer Two" layer.tips (' Default no Close button ', this, {guide:1, time:2}); "Input/File layer"//plain text layer.prompt ({title: ' Your name? '}, function (name) {alert (name);}); /Password text layer.prompt ({title: ' Enter any password and confirm ', type:1}, function (pass) {alert (pass);}); /File Upload layer.prompt ({title: ' Upload a random, and confirm ', type:2}, function (file) {alert (file);}); /Multiline Text layer.prompt ({title: ' Write anything, and confirm ', type:3}, function (val) {alert (val);}); "Tab Layer" Layer.tab ({area: [' 1000px ', ' 500px '], data: [{title: ' Say ', content: ' Hi,main '}, {title: ' Untitled ', Content: ' Support for HTML incoming '} '}); "album layer"//here is the asynchronous request mode, specific JSON format, please wait for the document to update. Or you can see Photos.jsonvar conf = {};$ directly through the request.Getjson (' Ajax address ', {}, Function (JSON) {Conf.photojson = JSON)///save JSON so that the next time the memory data is read directly Layer.photos ({html: ' here pass in Custom HTML can also be used without passing in (which means that the right area is not output). Album Support left and RIGHT ARROW keys, ESC off ', Json:json});
jquery Layer Pop-up is small and powerful