JQuery pop-up layer plug-in Lightbox_me User Guide, jquerylightbox_me
During website development, in order to increase the interaction between websites, we sometimes need to pop up windows such as login, registration, and setting on the current page. These windows are layers, and the pop-up window is the pop-up layer. There are many plug-ins in the pop-up layer in jQuery, but some support is perfect in html5 + css3 browsers. For example, ie8's browser does not show the expected effect. For example, the jquery. avgrund plug-in cannot be displayed in ie8.
The Lightbox_me plug-in introduced in this article can perfectly support mainstream browsers such as chrome, firefox, ie7, ie8, and ie9.
1. Lightbox_me plug-in Function
Used to display the pop-up layer
2. Lightbox_me official address
Http://buckwilson.me/lightboxme/
The demo address and common attributes are shown below the webpage.
3. How to Use Lightbox_me
1. First reference jquery. js and jquery. lightbox_me.js
<script src="/ref/jquery-1.7.2.min.js"></script><script src="/ref/lightbox_me/jquery.lightbox_me.js"></script>
2. Code used
<script type="text/javascript">$(function() { $('#login').click(function(e) { $('#loginbox').lightbox_me({ centered: true, onLoad: function() { $('#loginbox').find('input:first').focus() } }); e.preventDefault(); }); $('#cancel').click(function(){ $('#loginbox').trigger('close'); //alert('aaa'); });});</script>
4. Lightbox_me modify the style
The style Modification on the pop-up layer is very simple. You only need to use css. Example code:
# Loginbox {width: 400px; display: none; background: white; border: 1px solid # ccc ;}body {font-size: 12px; font-family: ;}. loginbox-title {background: # eef2f7; border-bottom: 1px solid # ccc; margin-bottom: 10px; padding: 8px 0; font-size: 14px; text-align: center ;}. loginbox-footer {padding: 8px 0; border-top: 1px solid # ccc; text-align: center; background: # eef2f7;} table {width: 98%; margin: 0 8px;} th, td {padding: 8px 0;} th {text-align: left ;}. big {padding: 5px 18px ;}
The above is all the content of this article. I hope you will like it.