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.