~「為響應政府網路分級制度,本站全部內容均為限制級」~

我的自製全螢幕光箱


mybox 哥的光箱


這是一支可以作出彈出式焦點視窗的程式,基於jQuery Plugin方式撰寫。



程式資訊:

Author:
         Feather Mountain(羽山) http://3wa.tw
官網:
         http://3wa.tw/demo/htm/mybox/
         https://github.com/shadowjohn/mybox
程式名稱:
         mybox 哥的光箱
Demo:
           Link
Donwload:
         mybox-0.9.js 0785742ec97b2dbe2292481436c59a88
         mybox-0.9.min.js 14c33ed5f78530da553c18e5de77c6b3
Key Word:
         Colorbox, Fancybox, Thinkbox, BlockUI

功能參數說明:

參數或方法 名稱 說明
使用方法(開啟)
使用方法(關閉) $.unmybox()
利用程式的方法關閉光箱,如:
$.unmybox();

或是 <input type='button' value='關閉' onClick="$.unmybox();">
方法

$.mybox_isOpen()

用來檢查光箱是否正在使用,回傳 true or false
參數

is_background_touch_close

設定點外面背景時,光箱會不會消失,如:
// 點外面會消失
is_background_touch_close : true
參數

message

要顯示的內容,如:
message : "你好"
或是 message : $('#test').html()
或是
message : myAjax("http://3wa.tw/webservice/api.php?mode=test","")

參考 myAjax 程式碼如下:
  function myAjax(url,postdata)
  {
    var tmp = $.ajax({
        url: url,
        type: "POST",
        data: postdata,
        async: false
     }).responseText;
    return tmp;
  }
          
方法

beforeBlock

在開啟光箱前會作什麼事,如:
  beforeBlock: function(){
    alert('Hi~~~');
  }
          
方法

onBlock

在開啟光箱完全開啟後作什麼事,如:
  onBlock: function(){
    alert("Hi~~~it's now opened.");
  }
          
方法

unBlock

在關閉光箱之後作什麼事,如:
  unBlock: function(){
    alert("關掉後的Alert!!!");
  }
          

ChangeLog

* Sat Dec 24 2016 Feather Mountain <http://3wa.tw> 0.9
- Limit mybox width and height the window screen size 90%.
    
* Fri Nov 20 2015 Feather Mountain <http://3wa.tw> 0.8
- Fix window scrollTop after unmybox when is_background_touch_close equals true.
    
* Sun Aug 02 2015 Feather Mountain <http://3wa.tw> 0.7
- Fix window scrollTop after unmybox.

* Thu Jul 02 2015 Feather Mountain <http://3wa.tw> 0.6
- Remove jQuery version check in setup.

* Tue Jun 30 2015 Feather Mountain <http://3wa.tw> 0.5
- Add $.mybox_isOpen().
    
* Tue Jun 23 2015 Feather Mountain <http://3wa.tw> 0.4
- Fixed contents.
    
* Thu Nov 27 2014 Feather Mountain <http://3wa.tw> 0.3
- Fixed screen scroll issue.
    
* Wed Aug 27 2014 Feather Mountain <http://3wa.tw> 0.2
- Fixed screen center issue.

* Thu Feb 20 2014 Feather Mountain <http://3wa.tw> 0.1
- Building on first time.