快捷導(dǎo)航

jQuery彈出層插件Lightbox_me使用指南

更新時間：2015年04月21日 10:03:54 投稿：hebedich

在使用discuzx中有一個Message以及Dialog方法來顯示信息對話框。今天寫項目的時候，需要一個信息對話框，所以就著手利用lightbox_me插件來寫一個做備用。

網(wǎng)站開發(fā)過程中，為了增加網(wǎng)站交互效果，我們有時需要在當前頁面彈出諸如登陸、注冊、設(shè)置等窗口。而這些窗口就是層，彈出的窗口就是彈出層。jQuery中彈出層插件很多，但有些在html5+css3瀏覽器下，支持完美。而在例如ie8一下的瀏覽器下顯示不出應(yīng)有的效果。例如jquery.avgrund插件在ie8下就無法顯示。

本文介紹的插件Lightbox_me可以完美的支持chrome,firefox和ie7,ie8,ie9等主流瀏覽器。

1.Lightbox_me插件功能

用于顯示彈出層

2.Lightbox_me官方地址

http://buckwilson.me/lightboxme/
在網(wǎng)頁的下面有演示地址和常用屬性。

3.Lightbox_me使用方法

1.首先引用jquery.js與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.使用的代碼

<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修改樣式

彈出層的樣式修改非常簡單，只需要會使用css就可以了。例如一下代碼：

#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;
}

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章:

相關(guān)文章

Jquery 自定義事件實現(xiàn)發(fā)布/訂閱的簡單實例
下面小編就為大家?guī)硪黄狫query 自定義事件實現(xiàn)發(fā)布/訂閱的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
40個新鮮出爐的jQuery 插件和免費教程[上]
作為最流行的 JavaScript 庫，jQuery 擁有豐富的插件，能夠幫助開發(fā)者簡單快速的實現(xiàn)各種功能
2012-07-07
jquery模擬picker實現(xiàn)滑動選擇效果
這篇文章主要為大家詳細介紹了jquery模擬picker實現(xiàn)滑動選擇效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-04-04
jQuery移動端跑馬燈抽獎特效升級版(抽獎概率固定)實現(xiàn)方法
這篇文章主要介紹了jQuery移動端跑馬燈抽獎特效升級版(抽獎概率固定)實現(xiàn)方法,涉及jQuery數(shù)值運算及條件判斷等相關(guān)操作技巧,需要的朋友可以參考下
2019-01-01
ASP.NET jQuery 實例11 通過使用jQuery validation插件簡單實現(xiàn)用戶登錄頁面驗證功能
從這節(jié)開始，我們開始學(xué)習如何在ASP.NET控件中使用jQuery validation 插件，首先要用它，必須先了解它有什么用
2012-02-02
jQuery簡單倒計時效果完整示例
這篇文章主要介紹了jQuery簡單倒計時效果,結(jié)合完整實例形式分析了jQuery針對日期與時間的計算與頁面元素動態(tài)操作相關(guān)技巧,需要的朋友可以參考下
2016-09-09
用JQuery 實現(xiàn)的自定義對話框
用JQuery 實現(xiàn)的自定義對話框...
2007-03-03
JQUERY 實現(xiàn)窗口滾動搜索框?？啃Ч?類似滾動?？?
由于分頁的效果卻又是非常令人厭惡的。滾動條無疑是一種簡單而又高效的一種方式。而這里，處于對用戶體驗的考慮，我使用Jquery實現(xiàn)了一種類似滾動?？康男Ч?，感興趣的朋友可以參考下哈
2013-03-03
JQuery中$之選擇器用法介紹
在jQuery 中$("<span>")，這個語法等同于$(document.createElement("span")) ，這是一種用法
2011-04-04
JQuery的Alert消息框插件使用介紹
沒有厭倦了原來那alert那個風格，總是一個感嘆號。有時使得UE不好，今天我們介紹使用Jquery Alert插件，使用它可以用來替換JScript中的alert,confirm,prompt。
2010-10-10