我的光箱,這是一支可以作出彈出式焦點視窗的程式,基於jQuery Plugin方式撰寫。
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
mybox-0.1.js
mybox-0.1.min.js
mybox-0.10.js
mybox-0.10.min.js
mybox-0.11.js
mybox-0.11.min.js
mybox-0.2.js
mybox-0.2.min.js
mybox-0.3.js
mybox-0.3.min.js
mybox-0.4.js
mybox-0.4.min.js
mybox-0.5.js
mybox-0.5.min.js
mybox-0.6.js
mybox-0.6.min.js
mybox-0.7.js
mybox-0.7.min.js
mybox-0.8.js
mybox-0.8.min.js
mybox-0.9.js
mybox-0.9.min.js
mybox-lastest.min.js
test.htm
test1.htm

README.md

mybox

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

我的自製全螢幕光箱


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.11.js 8586c612890c59191cad855017516a4e
         mybox-0.11.min.js 93c18214cebe4fc9d0a6511e6419623b
         mybox-lastest.min.js 93c18214cebe4fc9d0a6511e6419623b
Key Word:
         Colorbox, Fancybox, Thinkbox, BlockUI

功能參數說明:

參數或方法 名稱 說明
使用方法(開啟)
$.mybox({
   is_background_touch_close:false,
   message:"<img src='http://3wa.tw/pic/3wa_logo.png' width='300' > \
            <br> \
            你是個好人 \
            <br> \
            <input type='button' \
            value='Close' onClick=\"$.unmybox();\"> \
   ",
   css:{
     'border':'2px solid #fff',
     'padding':'50px',
     'background-color':'orange',
     'font-size':'46px',
     'color':'black'
   },
   beforeBlock:function(){      
     alert('test');     
   },
   onBlock:function(){
     alert('testok');           
   },
   unBlock:function(){
     alert('testfinish');           
   }
});
       
使用方法(關閉) $.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

* Fri Jan 12 2018 Feather Mountain <http://3wa.tw> 0.11
- Upgrade for jQuery 3.2.1 support.
- Fix dom.size() to dom.length

  • Fix scroll position.
  • Limit mybox width and height the window screen size 90%.
  • Fix window scrollTop after unmybox when is_background_touch_close equals true.
  • Fix window scrollTop after unmybox.
  • Remove jQuery version check in setup.
  • Add $.mybox_isOpen().
  • Fixed contents.
  • Fixed screen scroll issue.
  • Fixed screen center issue.
  • Building on first time.