CODEWITHSUNDEEP
htmlcssinternet-explorerinternet-explorer-11
Gary McGill
Gary McGill

Reputation: 27516

Why does IE select text in the background behind my "modal dialog"?

I'm using a "modal dialog" where the dialog is actually a DIV overlayed on top of another semi-transparent DIV that covers the whole screen. I've reduced this down to the bare minium in this example plunkr.

In all browsers I've tried, this works well in that the background is partially hidden, and you can't click on elements in the background - which is good.

However, in Internet Explorer (oh, yes), version 11 and possibly others, if I click in one part of the "dialog" and then shift-click in another part, it selects the appropriate content in the dialog and also selects text within the background content that's not part of the "dialog"(!). Like this:

enter image description here

This doesn't happen in Chrome. Why one earth is IE behaving like this, and is there anything I can do to prevent it?

[Note: my problem is that my "real" dialog has a pick-list inside it, which is actually an HTML table with some attached jQuery events to allow rows to be selected. I need to allow shift-selection to select a range of items, and while that all works correctly, stuff in the "background" gets highlighted too, which is very confusing.]

Upvotes: 1

Views: 874

Answers (1)

thisiskelvin
thisiskelvin

Reputation: 4202

If you are able to exclusively target the background content (without targeting the modal), it may help to add a condition which disables the ability to highlight text of the background once the modal is active. Something like the following:

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

    }

I hope this helps.

Upvotes: 1

Related Questions