How to make click only on modal exterior and not on dialog/content?

Question

So I'm making an extension for Google Chrome with my friend, and for most of the features (i.e. calendar, settings, etc.) we open a modal so we don't have to redirect to another page. We are trying to get the modal to close when you click outside of the content. Here's a little markup screenshot to give you an idea of what I'm talking about.

I want to be able to close the modal by clicking outside the white area. Currently it closes even when I click inside the white area. I have tried pretty much everything, including stopPropagation(), pointer-events:none;, and jquery disabling. None of them work for reasons unknown to me. Something weird about Chrome Extensions, I guess. Here's some of my code so far:

    function calendar() {
      document.getElementById("calendmodal").style.display = "block";
    }

document.addEventListener("DOMContentLoaded", function () {
  document.getElementById("calendicon").addEventListener("click", calendar);
  document.getElementById("calendmodal").addEventListener("click", closeModal);
  document.getElementById("calendmodal").addEventListener("click", function(event) {
    event.stopPropagation();
  });  
});

And HTML:

<div class="icons" id="icons_calendar">
        <img src='https://preview.ibb.co/jE76Bm/calendar.png' alt="calendar" border="0" id="calendicon"/>
      </div>
    <div id=calendmodal class="generalmodal">
      <div class="modal-content" id="calendcontent">
        <iframe src="https://calendar.google.com/calendar/embed?src=googleapps.wrdsb.ca_ptpdj55efmhg1nb89ruc15fi3k%40group.calendar.google.com&ctz=America%2FToronto" style="border: 0" width="800" height="600" frameborder="0" scrolling="no" visibility="hidden" id="calendiframe"></iframe>
        <p id=infostuff>For a more extensive calendar and<br>more school tools, visit <a href="http://jam.wrdsb.ca">The SJAM Website</a>.</p>
      </div>
    </div>

Not really sure what I'm doing wrong, I don't know how to do this in an extension.

Elliot B. · Answer 1 · 2018-01-26T01:17:34.207

1

In your earlier attempts, where did you execute event.stopPropagation()? It's not included in your code example.

What you need to do is prevent a click event on #calendmodal from bubbling up the DOM and triggering a click event on the body (or another container element) whose event handler closes your modal dialog.

You can do so like this:

document.getElementById("calendmodal").addEventListener("click", function(event) {
    event.stopPropagation();
});

edited Jan 26 '18 at 01:17

answered Jan 26 '18 at 01:12

Elliot B.

17,060
10
80
101

I had tried `event.stopPropagation` earlier but it did not work, so I deleted it temporarily. I will try this format. – Rohan Shetty Jan 26 '18 at 01:17
I tried what you said, but now it doesn't close the modal no matter where I click. – Rohan Shetty Jan 26 '18 at 01:20
@RohanShetty You were likely using it in an event handler for the wrong element. `event.stopPropgation()` must be invoked in the `click` event handler for `#calendmodal` – Elliot B. Jan 26 '18 at 01:20
@RohanShetty Please update the code example in your original question. I cannot provide advice if you don't provide the code you've written. – Elliot B. Jan 26 '18 at 01:21
Updated code. Are you saying it needs to be inside the function `calendar`? – Rohan Shetty Jan 26 '18 at 01:26
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/163916/discussion-between-rohan-shetty-and-elliot-b). – Rohan Shetty Jan 26 '18 at 01:29
@RohanShetty Why did you just edit your question to add this line `document.getElementById("calendmodal").addEventListener("click", closeModal);`? You're telling the modal to close as soon as you click on it. Please remove that line. – Elliot B. Jan 26 '18 at 01:34

Iván Nokonoko · Accepted Answer · 2018-01-26T08:40:18.287

1

I don't know exactly how you show your modal dialog, but my approach for this issue is like this (you may be able to adapt it ot your particular case):

I have a transparent <div> as container that takes up the whole screen, and inside it, using CSS, I position the modal dialog. Something like:

<div id="container" style="position:fixed;top:0;bottom:0;left:0;right:0;display:none">
    <div id="myModal" style="position:absolute;width:300px;height:200px;left:100px;top:100px">
        <!-- Here goes my content -->
    </div>
</div>

With this approach, to display the dialog I do something like:

function openModal(){
  document.getElementById("container").style.display = "block";
}

And to close it when clicked on the transparent background but not on the dialog I have:

document.getElementById("container").onclick = function(event) {
  if (event.target === this) {
    this.style.display = "none";
  }
};

edited Jan 26 '18 at 08:40

answered Jan 26 '18 at 08:08

Iván Nokonoko

4,888
2
19
27

I can't use the format above because it doesn't work in the extension. I have to add an event listener under the `DOMContentLoaded` function. – Rohan Shetty Jan 27 '18 at 04:18
OK, I used your code somewhat but I adapted it a little. I read up a lot on Event Listeners and made `document.getElementById("calendmodal").addEventListener("click", function(event){if (event.target !== this)return; document.getElementById("calendmodal").style.display = "none";}); ` I will mark this as correct because it did help me somewhat. – Rohan Shetty Jan 28 '18 at 00:12
@RohanShetty You accomplish the same with shorter code: `document.getElementById("calenmodal").addEventListener("click", function(event){if (event.target === this) this.style.display = "none";});`. – Iván Nokonoko Jan 28 '18 at 12:46

How to make click only on modal exterior and not on dialog/content?

2 Answers2