這裏是我的方法:
你需要一個document
事件偵聽器在用戶單擊任何地方時隱藏該框。但是事件監聽器是沒有必要的,當箱子被隱藏,所以 - 它可以在顯示框只加,如:
var box = $('#trigger-box'),
showBox = function (e) {
if (!box.is(':visible')) { // only do that when box is hidden
e.stopPropagation(); // required to prevent document
box.show();
$(document).on('click.showBox', hideBox); // event namescope for easy removal
}
},
然後 - 當盒子被隱藏 - 我們可以刪除此事件偵聽器,像這樣:
var hideBox = function (e) {
var target = $(e.target);
if (target.is(box) || target.closest(box).length) return; // don't close if clicked on box or on anything inside the box
$(document).off('click.showBox');
box.hide();
}
,然後 - 我們可以只添加事件偵聽器:
$('#trigger-button').on('click', showBox);
DEMO
首先,擺脫傳遞給'click'的第二個參數/函數。這個不成立。之後,看看jQuery UI對話框。他們可能會做你想做的。還有很多類似的庫可以顯示模態對話窗口。 – ThiefMaster
謝謝了。自從我使用切換以來,第二個參數沒有做任何事情。 :)但我仍然需要一個最簡單的方法來做第二部分。我不想用大型圖書館來實現這一點。 –
也有小的。例如http://www.malsup.com/jquery/block/。但是,如果你不想要模態行爲,請參閱adeneo的答案。 – ThiefMaster