jQuery pop up layer plugin Lightbox_me user guide

In the process of website development, in order to increase the interactive effect of the website, we sometimes need to pop up Windows such as login, registration, Settings and so on in the current page. And these Windows are layers, and the popup window is the popup layer. There are many popup layer plugins in jQuery, but some of them are perfectly supported in html5+css3 browsers. On a browser like ie81, for example, it doesn't look as good as it should. For example, the jquery.avgrund plug-in cannot be displayed under ie8.

The plug-in Lightbox_me introduced in this article can perfectly support chrome,firefox and ie7,ie8,ie9 and other major browsers.

1.Lightbox_me plug-in functionality

Used to display the pop-up layer

2.Lightbox_me official address

http://buckwilson.me/lightboxme/
At the bottom of the page are demo addresses and common properties.

3. Usage of 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 of the pop-up layer is very simple. You only need to know how to use css. For example, the following code:

#loginbox{
  width:400px;
  display:none;
  background:white;
  border:1px solid #ccc;
}
body {
  font-size:12px;
  font-family: Microsoft jas black ;
}
.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;
}

That's all for this article, I hope you enjoy it.