官網 jBox by Stephan Wagner : http://stephanwagner.me/jBox
|
1 2 |
jBox is a powerful and flexible jQuery plugin, taking care of all your popup windows, tooltips, notices and more. |
使用 Modal 強制使用關閉按鈕、弱化背景、標題拖曳視窗
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> $('#idBoss').jBox('Modal', { title: "建立公司 基本資料", width:600, height:400, blockScroll:false, animation:'zoomIn', draggable:'title', closeButton:'title', overlay:true, closeOnClick:false, content: $('#idModalBoss') }); </script> |
--
應用
|
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 |
<div id="idList" class="Hide"> <div id="idDate"></div> </div> <script> $(function(){ var Width = screen.width *0.8; var Height = screen.height *0.65; myModal = new JBox('Modal', { title: "詳細資料", width:Width, height:Height, blockScroll:false, fade:false, animation:'', draggable:'title', closeButton:'title', overlay:true, closeOnClick:false, content: $('#idList') }); }); $('.TableContent').click(function() { var $this = $(this); if ( $this.data('value') ) { $('#idDate').html($this.data('value')); myModal.open(); } }); </script> |
jBox 的物件化必須注意 DOM 的載入順序，如果發生無法載入 content 的情況，可能就是 DOM 的問題。
將 new jBox 放在 $( document ).ready() 內再試試看
--
重新設定
|
1 2 3 4 5 |
// 將 EditModal jBox 物件重新設定為寬 600 高 300 標題根據資料重新設定 EditModal.setWidth(600); EditModal.setHeight(300); EditModal.open().setTitle( $('#id_Save_Name').val()+' 會員資料', true); |
--
關閉按鈕阻止其他事件觸發
|
1 2 3 |
onCloseComplete:function(){ event.preventDefault(); } |
--
5,114 total views, 1 views today