jquery Pop-up Layer Plugin Lightbox

There is a message in use DISCUZX and a dialog method to display the Information dialog box. Today, when you write a project, you need an information dialog box, so start using the Lightbox_me plugin to write a backup.

In the process of web development, in order to increase the effect of site interaction, we sometimes need to pop in the current page such as landing, registration, settings and other windows. These windows are layers, and the pop-up window is the pop-up layer. jquery pops up layer plug-ins a lot, but some in the Html5+css3 browser, support perfect. In browsers such as IE8, it does not display the desired effect. For example, the Jquery.avgrund plugin cannot be displayed under IE8.

This article describes the plug-in Lightbox_me can perfect support Chrome,firefox and IE7,IE8,IE9 and other mainstream browsers.

1.lightbox_me Plug-in Features

For displaying the pop-up layer

2.lightbox_me official Address

http://buckwilson.me/lightboxme/

There are demo addresses and common properties below the Web page.

How to use 3.lightbox_me

1. First quote Jquery.js and Jquery.lightbox_me.js

?

1 2	<script src= "/ref/jquery-1.7.2.min.js" ></script> <script src= "/ref/lightbox_me/jquery.lightbox_" Me.js "></script>

2. The code used

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16-17

<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 pop-up layer style modification is very simple, only need to use CSS on it. For example, code:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22-23-24 25 26 27 28 29 30 31 32 33 34 35-36

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

The above mentioned is the entire content of this article, I hope you can enjoy.