辭退的tablesorter列選擇的Widget

Question

我使用Mottie的優秀的tablesorter列選擇窗口小部件。它很棒！

然而，當用戶點擊該按鈕（使用CSS彈出僅模式），駁回選擇模式的唯一方法是再次點擊相同的按鈕。這與我的應用程序的其餘部分不一致，這會在單擊模式外部的任何位置時解除引導模式。

我知道我可以編寫一個onClick函數來監視整個身體，但我想知道，是否有一個內置選項，我錯過了當用戶在盒子外面單擊時會關閉列選擇器？

Answer 1

那「列」按鈕採用了隱藏式複選框來顯示/隱藏彈出 - 它是純HTML CSS &，完全可定製。

如果您修改當前的設置，添加以下（demo）：

HTML（添加 「columnSelectorWrapper」 後）

<div id="columnSelectorOverlay"></div> 

CSS

#columnSelectorOverlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: rgba(0,0,0,.5); 
    display:none; 
} 

*注意：如果您不想要黑色覆蓋圖，請移除background: rgba(0,0,0,.5);設置。

然後將以下設置添加到.columnSelector定義：

z-index: 1; 

然後加入這個JavaScript

$('#colSelect1').on('change', function() { 
    if (this.checked) { 
    $('#columnSelectorOverlay').show(); 
    } 
}); 

$('#columnSelectorOverlay').click(function() { 
    $('#colSelect1').prop('checked', false); 
    $(this).hide(); 
});