8

I am building on a webpage template and made some modifications for modal pop up as given below:

<div class="modal fade" id="myModal4" tabindex="-1" role="dialog" style="background-color:#FECE1A;display:none;width:750px;left:46%" aria-hidden="true">
  <div class="modal-dialog">
  <script>
    $("#myModal4").on("show", function () {
      $("body").addClass("modal-open");
    }).on("hidden", function () {
      $("body").removeClass("modal-open")
    });
  </script>
  <!--Modal Content-->
  </div>
</div>

and the body.modal-open css function goes like this

body.modal-open {
  overflow: hidden;
}

the popup works fine. The problem is that whenever the pop up appears I can still click the header menu of the template and some links in the background. How do I disable everything in the background such that I can click only what is available at the popup.

8
  • How about using overlay?
    – kyun
    Aug 10, 2017 at 8:14
  • you need to add an overlay with opacity less than 0.5
    – Sagar V
    Aug 10, 2017 at 8:15
  • @SagarV Why does the opacity have to be less that 0.5? Any value for this property should work for OPs purpose. Aug 10, 2017 at 8:19
  • 1
    @SagarV that is very subjective.
    – charlietfl
    Aug 10, 2017 at 8:24
  • 1
    @SagarV From a design perspective I agree that modals should have a transparent overlay behind them to visually confirm to users that other elements are not clickable - this is good UX. However your comment made it sound as if this was a technical requirement, which of course it is not. Aug 10, 2017 at 8:26

3 Answers 3

14

You could use an overlay - another div the full size of the screen that covers the html, with the bonus of giving a translucent grey shadow over the body.

In this example, use two divs.

One is the overlay, and the other (inside the overlay for convenience) is the modal.

<div class="overlay">
  <div class="modal">
    This is the modal. You can put whatever you like in here.
  </div>
</div>

Now the overlay needs styles:

.overlay {
  position: fixed; /* Positioning and size */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(128,128,128,0.5); /* color */
  display: none; /* making it hidden by default */
}

and the modal needs some too:

.modal {
  position: fixed; /* positioning in center of page */
  top: 50vh;
  left: 50vw;
  transform: translate(-50%,-50%);
  height: 400px; /* size */
  width: 600px;
  background-color: white; /* background color */
}

Include jQuery by putting this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

In the head tag at the top of your code.

Then, use this button to open the modal:

<button onclick="$('.overlay').show();">Open modal</button>

and this jQuery code to catch click on the overlay but not its child.

$('.overlay').on('click', function(e) {
  if (e.target !== this) {
    return;
  }
  $('.overlay').hide();
});

$('.overlay').on('click', function(e) {
  if (e.target !== this) {
    return;
  }
  $('.overlay').hide();
});
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(128,128,128,0.5);
  display: none;
}
.modal {
  position: fixed;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%,-50%);
  height: 400px;
  width: 600px;
  background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<a href="https://www.google.co.uk">This is a link, but with the modal open you can't click it!</a>
<br>
<br>
<button onclick="$('.overlay').show();">Open modal</button>

<div class="overlay">
  <div class="modal">
    This is the modal. You can put whatever you like in here.
  </div>
</div>

1
  • the code is working but i could not use it on my project, but it helped me a lot to solve the problem... thank you very much.
    – user8432175
    Aug 10, 2017 at 11:07
6

Introduction

A simple solution would be to add a <div> that covers the background, and is positioned below the popup but above all other content.

Below is a very simple example of what I would imagine you are trying to do. Hopefully you can adapt it to suit your scenario.

Example

function openModal() {
  $("#overlay").css({"display":"block"});
  $("#modal").css({"display":"block"});
}
#modal {
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  border:solid 1px #000;
  display:none;
  background-color:#fff;
}

#overlay {
  position:fixed;
  left:0;
  top:0;
  width:100vw;
  height:100vh;
  display:none;
  background-color:#000;
  opacity:0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Awesome Content!

<button onclick="openModal()">Open Modal!</button>

<div id="overlay"></div>
<div id="modal"><h1>Modal Content!</h1></div>

Key Points

  • The #overlay div came before the #modal div - this is how I set the modal to be on top. Alternatively you could use z-index in CSS;

  • The opacity value is not required here, it is simply used as a demonstration of where the overlay is in relation to the page / modal;

  • None of the implementation details here matter. The JavaScript should not be important, neither should most of my CSS. The example simply exists to point you in the right direction.

3
  • 1) your modal doesn't close 2) you don't need to set the height of body and html because you can use width: 100vw; (vw is viewport width. 100vw is 100% of the viewport width) and height: 100vh; (vh is viewport height) Aug 10, 2017 at 8:44
  • @JamesDouglas My modal does not need to close - I am simply demonstrating how a background overlay would work, not how the Javascript would work (it is fairly simple). Thanks for reminding me about vh and vw though - I will edit my post to use these units instead. Aug 10, 2017 at 8:53
  • though it was not the solution, it helped to get an insight on the matter... thank you very much :) (y)
    – user8432175
    Aug 10, 2017 at 11:06
2

Here's an example of using CSS property pointer-events (https://developer.mozilla.org/en/docs/Web/CSS/pointer-events).

Example: https://codepen.io/zvona/pen/YxQzEO

The key idea is to have pointer-events: none; for the body when modal is open. But the specific elements you want to be interacted with should have e.g. pointer-events: auto;.

In the example you can click both buttons when dialog is hidden, but only Toggle Dialog button when dialog is shown.

2
  • 1
    This answer is cleaner than any others and should become the accepted answer.
    – user13637316
    Jun 6, 2020 at 15:02
  • Agreed that this answer appears cleaner, and easier, than the others. The others seem like more of a hack compared to this answer.
    – cag8f
    Jan 8, 2021 at 5:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy