jquery Pop-up Layer Plugin Lightbox

Source: Internet
Author: User

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


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.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.