首页 文章

为什么IE在我的“模态对话框”后面的背景中选择文本?

提问于
浏览
1

我正在使用"modal dialog",其中对话框实际上是 DIV 覆盖在覆盖整个屏幕的另一个半透明 DIV 之上 . 我把它减少到了this example plunkr的最低限度 .

在我尝试的所有浏览器中,这很好用,因为背景是部分隐藏的,你不能点击背景中的元素 - 这很好 .

但是,在Internet Explorer(哦,是),版本11以及可能的其他版本中,如果我单击"dialog"的一部分然后在另一部分中按住Shift键单击,它会在对话框中选择适当的内容并选择背景中的文本不属于"dialog"(!)的内容 . 像这样:

这不会发生在Chrome中 . 为什么一个地球是IE这样的行为,有什么我可以做的,以防止它?

[注意:我的问题是我的“真实”对话框里面有一个选择列表,它实际上是一个HTML表,其中包含一些附加的jQuery事件以允许选择行 . 我需要允许shift-selection来选择一系列项目,虽然这一切都正常,但“背景”中的内容也会突出显示,这非常令人困惑 .

1 回答

  • 1

    如果您能够专门定位背景内容(不定位模态),则可能有助于添加一个条件,该模式禁用在模式处于活动状态时突出显示背景文本的功能 . 类似于以下内容:

    CSS

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

    jQuery Example

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

    Alternative

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

    我希望这有帮助 .

相关问题