Page darkens and can't be scrolled up or down after closing modal

Question

I have two modal boxes coming out at the same time when I click a button. When I click outside of the two modal boxes, they will close at the same time. But the problem happens after closing the 2 modal boxes at the same time. The page darkens and I can't scroll the page!

var modalA = document.getElementById('projectModalSecond2');

// Get the modal
var modal = document.getElementById('projectModal2');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  //alert(event.target)
  if (event.target == modal) {
    modal.style.display = "none";
    modalA.style.display = "none";
  }

  if (event.target == modalA) {
    modalA.style.display = "none";
    modal.style.display = "none";
  }
}

<div tabindex="0" class="modal fade pop-up-box-index pop-up-box-margin-left" id="projectModal2">
  <div class="modal-dialog">
    <div class="modal-content pop-up-box-top-margin pop-up-box-index">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title"><b>Substrate Map Station Controller (SMSC)</b></h4>
      </div>
      <div class="modal-body">
        <img src="assets/img/gallery/ULT_SDT1.jpg" alt="" class="img-responsive">
        <p>Full range of station controller.</p>
        <br>
      </div>
    </div>
  </div>
</div>

<div tabindex="0" class="modal fade pop-up-box-index pop-up-box-margin-right" id="projectModalSecond2">
  <div class="modal-dialog">
    <div class="modal-content pop-up-box-top-margin pop-up-box-index">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title"><b>Substrate Map Editor (SME)</b></h4>
      </div>
      <div class="modal-body">
        <img src="assets/img/gallery/ULT_SDT2.jpg" alt="" class="img-responsive">
        <p>Unit and Substrate map traceability</p>
        <br><br>
      </div>
    </div>
  </div>
</div>

without a working example, it is difficult to find the problem. — vishnu, Jul 12 '18 at 06:03
sorry, i'm trying to edit it, but i can't seems to copy paste my code from dreamweaver, gotta type it — JavaThoughts, Jul 12 '18 at 06:24
try with [https://jsfiddle.net/1cd9kmb6/1/](https://jsfiddle.net/1cd9kmb6/1/) here I have added BS 3.3.7 cdn for you. Add existing code and click "update". — vishnu, Jul 12 '18 at 06:32
Thanks for the jsfiddle, usefull stuff. So...i think it's something like this? https://jsfiddle.net/1cd9kmb6/7/ — JavaThoughts, Jul 12 '18 at 07:07
It is working without your JS [https://jsfiddle.net/1cd9kmb6/8/](https://jsfiddle.net/1cd9kmb6/8/) — vishnu, Jul 12 '18 at 07:14
sorry i forgot to mention the JS part is to make the 2 modal boxes close simultaneously. Without that, I would have to click 2 times for both modal to close. I got to check that JS part, seems like that is the problem — JavaThoughts, Jul 12 '18 at 07:18
i have to somehow put everything in jsfiddle i guess (the template was purchased, so i'm kinda lost on which code connects to where). Like you said, it's difficult to find the problem without a working example. — JavaThoughts, Jul 12 '18 at 08:32

score 0 · Answer 1 · answered Jul 12 '18 at 06:10

0

Seems like you are using Bootstrap, in that case you are probably using jQuery. I see that you are using plain javascript to do the job, but for this particular case you should consider jQuery for closing your modal.

$('#projectModalSecond2').modal('hide');
$('#projectModal2').modal('hide');

answered Jul 12 '18 at 06:10

Yoannes Geissler

791
1
9
18

I added that, I can now scroll the page but it remains darken. I think there is some kind of layer? – JavaThoughts Jul 12 '18 at 06:54
How about if you try like (https://stackoverflow.com/questions/46215070/blank-screen-on-close-of-modal-appears-sometimes) answer. Removing the backdrop: `$(".modal-backdrop").remove();` – Yoannes Geissler Jul 12 '18 at 07:16
@JavaThoughts the black layer that you are talking about is called an overlay, if you check in the classes that get appended in the code when the modal is opened. There is a separate class for this black layer, in which the modal is displayed. You can remove it if you want to, but this is the default functionality of a Boostrap modal. – Code_Ninja Jul 12 '18 at 07:18
@YoannesGeissler i added that, but it's still the same, dark and can scroll but can't click – JavaThoughts Jul 12 '18 at 08:26
@Code_Ninja i can't seems to find the code shown in dreamweaver when i click on the dark overlay. If it's a class, then if i can find it, it should be easier (it's a purchased template if that makes a difference). I have to remove it, if i don't it'll be dark after the modal close. – JavaThoughts Jul 12 '18 at 08:30
@JavaThoughts if you check the class `.modal-backdrop.in`, there is a CSS attribute that says `opacity:0.5`, if you remove it, color becomes normal. – Code_Ninja Jul 12 '18 at 08:39
and if you make it `display:none`, then the modal disappears completely. – Code_Ninja Jul 12 '18 at 08:42
@Code_Ninja um...I can't find .modal-backdrop.in is it some kind of fix class? – JavaThoughts Jul 12 '18 at 09:12
@JavaThoughts, yes it is generic class for Bootrap Modal, it is added in the DOM structure when the modal is popped. – Code_Ninja Jul 12 '18 at 09:14
@JavaThoughts run your output and check it in Developer Tools, you will find it – Code_Ninja Jul 12 '18 at 09:15

Page darkens and can't be scrolled up or down after closing modal

1 Answers1