jQuery popup layer plug-in Lightbox_me usage guide_jquery

During the website development process, in order to increase the interactive effect of the website, we sometimes need to pop up windows such as login, registration, settings, etc. on the current page. These windows are layers, and the pop-up windows are pop-up layers. There are many popup layer plug-ins in jQuery, but some of them are perfectly supported under the HTML5 CSS3 browser. However, in a browser such as IE8 or below, the desired effect cannot be displayed. For example, the jquery.avgrund plug-in cannot be displayed under ie8.

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

1.Lightbox_me plug-in function

Used to display popup layer

2.Lightbox_me official address

http://buckwilson.me/lightboxme/
There are demo addresses and common attributes at the bottom of the web page.

3. How to use Lightbox_me

1. First quote 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 style

The style modification of the pop-up layer is very simple, you only need to be able 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:微软雅黑;
}
.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 the entire content of this article, I hope you all like it.