html - 为什么 IE 在我的 "modal dialog"后面选择背景中的文本？

Question

我正在使用“模态对话框”，其中对话框实际上是一个 DIV 覆盖在另一个覆盖整个屏幕的半透明 DIV 之上。我在 this example plunkr 中将其减少到最低限度.

在我尝试过的所有浏览器中，这种方法效果很好，因为背景被部分隐藏，而且您不能点击背景中的元素 - 这很好。

但是，在 Internet Explorer(哦，是的)版本 11 和可能的其他版本中，如果我单击“对话框”的一部分，然后按住 Shift 键单击另一部分，它会在对话框中选择适当的内容并且 < em>also 选择背景内容中不属于“对话框”(!) 一部分的文本。像这样:

这在 Chrome 中不会发生。为什么 IE 的行为如此，我能做些什么来阻止它？

[注意:我的问题是我的“真实”对话框中有一个选择列表，它实际上是一个 HTML 表格，带有一些附加的 jQuery 事件以允许选择行。我需要允许 shift-selection 来选择一系列元素，虽然一切正常，但“背景”中的内容也会突出显示，这非常令人困惑。]

Answer 1

如果您能够专门针对背景内容(而不针对模式)，添加一个条件可能会有所帮助，该条件会在模式处于事件状态时禁用突出显示背景文本的功能。类似于以下内容:

CSS

.noSelection {
  -webkit-user-select: none; /* Chrome/Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
}

jQuery 示例

$('.modalHandle').click(function() {

  $('.modal').hasClass('active') {
    $('.bgContentArea').addClass('noSelection');
  } else {
    $('.bgContentArea').addClass('noSelection');
  }

}

备选

$('.modalHandle').click(function() {

      $('.modal').hasClass('active') {
        $('.bgContentArea').onselectstart = function() { return false; }
      } else {
        $('.bgContentArea').onselectstart = function() { return true; }
      }

    }

希望对您有所帮助。