Jquery layer pop-up window plug-in is small and powerful, jquerylayer

Source: Internet
Author: User

Jquery layer pop-up window plug-in is small and powerful, jquerylayer

/* Go to the official website to download the latest js repository ('# id '). on ('click', function () {layer. msg ('test') ;}); the call code for the above example is as follows: [Information Box]: layer. alert ('cabbage-level front-end attacker xianxin ', 8); // style 1 layer. msg ('front-end attacker xianxin '); // style 2 // Of course, there are far more than these two styles. [Query Box]: $. layer ({shade: [0], area: ['auto', 'auto'], dialog: {msg: 'What do you think of front-end development? ', Btns: 2, type: 4, btn: ['https', 'qout'], yes: function () {layer. msg ('importance ', 1, 1) ;}, no: function () {layer. msg ('qout', 1, 13) ;}}); // layer is also available. confirm () quick call [page Layer 1] $. layer ({type: 1, shade: [0], area: ['auto', 'auto'], title: false, border: [0], page: {dom: '. layer_notice '}); [page Layer 2] var pageii = $. layer ({type: 1, title: false, area: ['auto', 'auto'], border: [0], // remove the default border shade: [0], // remove the closeBtn mask: [0, False], // remove the default close button shift: 'left', // from the left animation pop-up page: {html: '<div style = "width: 420px; height: 260px; padding: 20px; border: 1px solid # ccc; background-color: # eee; "> <p> from the left, I have customized the style. </P> <button id = "pagebtn" class = "btns" onclick = ""> close </button> </div> '}}); // self-set close $ ('# pagebtn '). on ('click', function () {layer. close (pageii) ;}); [iframe Layer 1] $. layer ({type: 2, shadeClose: true, title: false, closeBtn: [0, false], shade: [0.8, '# 000'], border: [0], offset: ['20px ', ''], area: ['1000px', ($ (window ). height ()-50) + 'px '], iframe: {src: 'http: // f2e.sentsin.com/chat'}); [iframe layer 2] layer. tips ('5 seconds The window in the lower right corner is automatically closed and a new iframe ', this, {time: 5, maxWidth: 260}); $. layer ({type: 2, closeBtn: false, shadeClose: true, shade: [0.1, '# fff'], border: [0], time: 5, iframe: {src: 'test/guodu.html '}, title: false, area: ['300px', '250px '], shift: 'right-bottom', end: function () {$. layer ({type: 2, title: 'xianxin blog-sentsin.com ', shadeClose: true, maxmin: true, fix: false, area: ['1024px', 500], iframe :{ Src: 'http: // sentsin.com/'}) ;}}; [load layer 1] layer. load (3); [load layer 2] layer. load ('Load with text', 3); [tips layer 1] 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, true]}); [tips layer 2] layer. tips ('no close button by default ', this, {guide: 1, time: 2}); [input/file layer] // common 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) ;}); // upload the file layer. prompt ({title: 'upload anything at will, and confirm ', type: 2}, function (file) {alert (file) ;}); // multi-line text layer. prompt ({title: 'Whatever you want to write, and confirm ', type: 3}, function (val) {alert (val) ;}); [tab layer] layer. tab ({area: ['1000px ', '500px'], data: [{title: 'say', content: 'Hi, main'}, {title: 'No topic ', content:' html input supported '}]}); [Album layer] // asynchronous request mode. The json format is required. Please wait for the document to be updated. Or you can directly view photos through the request. jsonvar conf ={}; $. getJSON ('ajax address', {}, function (json) {conf. photoJSON = json; // save json so that you can directly read the memory data layer next time. photos ({html: 'Here the custom html is imported, or you do not need to input it (this means that the right area is not output ). The album supports the left and right arrow keys, Esc shutdown ', json: json });});


Has anyone used the js pop-up layer plug-in jquery-layer?

His official help documentation

A Jquery pop-up layer plug-in is recommended.

Www.oschina.net /...? Pp = 19 this is good. This is what I use now. It is highly customizable and has a beautiful interface that supports frame masks. Cross-origin calling URLs can be implemented, and automatic width adaptation is supported.

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.