jquery Layer Pop-up is small and powerful

Source: Internet
Author: User

/* 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.