为什么IE在我的＆＃34;模态对话框后面的背景中选择文字＆＃34;？

Question

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

在我尝试的所有浏览器中，这很有效，因为背景部分隐藏，你无法点击背景中的元素 - 这很好。

然而，在Internet Explorer（哦，是的），版本11以及可能的其他版本中，如果我点击＆＃34;对话框的一部分＆＃34;然后在另一部分中按住Shift键并单击，它会在对话框中选择适当的内容，并且还选择背景内容中不属于＆＃34;对话框的文本＆＃34;（ ！）。像这样：

这不会发生在Chrome中。为什么一个地球的IE表现如此，我能做些什么来阻止它呢？

[注意：我的问题是我的＆＃34;真实＆＃34;对话框里面有一个选择列表，它实际上是一个HTML表，其中包含一些附加的jQuery事件以允许选择行。我需要允许移位选择来选择一系列项目，虽然这一切都正常，但是在＆＃34;背景＆＃34;也被突出显示，这非常令人困惑。]

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; }
      }

    }

我希望这会有所帮助。