关闭TableSorter列选择器小组件

Question

我在Mottie的优秀餐桌上使用了Column Selector Widget。它很棒！

但是，当用户点击按钮（使用CSS Popup only模式）时，解除选择模式的唯一方法是再次单击同一按钮。这与我的应用程序的其余部分不一致，当点击模态之外的任何地方时，它会解除引导模态。

我知道我可以编写一个onClick函数来监控整个身体，但是我想知道，当用户在框外点击时，是否有一个我错过的内置选项会忽略列选择器？ / p>

Answer 1

“Column”按钮使用隐藏的复选框来显示/隐藏弹出窗口 - 它是纯HTML和＆amp; 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();
});