Closing Popup by Clicking Anywhere Outside It

Question

I was able to successfully add a popup that loads automatically when the page loads:

//with this first line we're saying: "when the page loads (document is ready) run the following script"
$(document).ready(function () {
  //select the POPUP FRAME and show it
  $("#popup").hide().fadeIn(1000);

  //close the POPUP if the button with id="close" is clicked
  $("#close").on("click", function (e) {
    e.preventDefault();
    $("#popup").fadeOut(1000);
  });
});

/*we need to style the popup with CSS so it is placed as a popup does*/
#popup {
  display:none;
  position:absolute;
  margin:0 auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0px 50px 2px #000;
}

body {
  background:url('http://i.imgur.com/kO2Ffje.png?1') center top;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- let's call the following div as the POPUP FRAME -->
<div id="popup" class="popup panel panel-primary">

  <!-- and here comes the image -->
  <img src="http://i.imgur.com/cVJrCHU.jpg" alt="popup">

  <!-- Now this is the button which closes the popup-->
  <div class="panel-footer">
    <button id="close" class="btn btn-lg btn-primary">Close button</button>
  </div>

  <!-- and finally we close the POPUP FRAME-->
  <!-- everything on it will show up within the popup so you can add more things not just an image -->
</div>

(per How do I make an image automatically popup on my main page when someone goes to it?'s instructions),

But instead of clicking a button to close the popup, I would like to know how to modify the javascript so that it closes when you click anywhere outside of it.

Hello and welcome to Stackoverflow. Please add more information about your issue. — P. Frank, Jan 21 '16 at 13:38

score 2 · Answer 1 · answered Jan 21 '16 at 13:38

You just need to add a div (.mask for example) who will be below the popup. (You can add it background with opacity, just for the effect).

If you click on it (or the button) hide the popup.

//with this first line we're saying: "when the page loads (document is ready) run the following script"
$(document).ready(function () {
  //select the POPUP FRAME and show it
  $("#popup,.mask").hide().fadeIn(1000);

  //close the POPUP if the button with id="close" is clicked
  $("#close,.mask").on("click", function (e) {
    e.preventDefault();
    $("#popup,.mask").fadeOut(1000);
  });
});

/*we need to style the popup with CSS so it is placed as a popup does*/
#popup {
  display:none;
  position:absolute;
  margin:0 auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0px 50px 2px #000;
}

body {
  background:url('http://i.imgur.com/kO2Ffje.png?1') center top;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.mask {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- let's call the following div as the POPUP FRAME -->
<div id="popup" class="popup panel panel-primary">

  <!-- and here comes the image -->
  <img src="http://i.imgur.com/cVJrCHU.jpg" alt="popup">

  <!-- Now this is the button which closes the popup-->
  <div class="panel-footer">
    <button id="close" class="btn btn-lg btn-primary">Close button</button>
  </div>

  <!-- and finally we close the POPUP FRAME-->
  <!-- everything on it will show up within the popup so you can add more things not just an image -->
</div>
<div class="mask"></div>

Sure. Just like the popup has. You don't want it to cover the whole content before it becomes visible. In the example it's indeed not needed, but in the real life it does. — Mosh Feu, Mar 22 '20 at 09:32
Thanks, but wouldn't `hide().fadeIn(1000)` do that? (Also `z-index:-1` can be used as well on the `.mask` if I'm not mistaken). — aderchox, Mar 22 '20 at 09:51
It is. But again, `hide().fadeIn(1000)` is only for the example. Usually you don't want to show a popup by default but only when user does something or a condition is true. There are a lot of ways to hide elements, `display: none` is the obvious. [Also](https://stackoverflow.com/a/11757103/863110).. — Mosh Feu, Mar 22 '20 at 11:18

score 0 · Answer 2 · edited Oct 07 '20 at 14:51

In my case, I just putt all content in div and use onClick! It was important to use a position: absolute and top: 0. This was made in React.

            <div
              style={{
                color: "rgba(2, 2, 34, 0.404)",
                width: "100%",
                height: "100%",
                zIndex: "9999999",
                position: "absolute",
                top: 0,
              }}
              onClick={() => {
                value.closePortfolioModal();
              }}
            >
              <Section>
                <div className="row-title">
                  <Title title="portfolio" />
                </div>
                <ModalContainer>
                  <div className="featured-rooms-center">
                    {loading ? <Loading /> : portfolio}
                  </div>
                </ModalContainer>
                <a
                  className="btn-close"
                  onClick={() => {
                    value.closePortfolioModal();
                  }}
                >
                  <i className="fas fa-times-circle" />
                </a>

                <div className="button-row">
                  <button className="btn-primary">See all</button>
                </div>
              </Section>
            </div>

Closing Popup by Clicking Anywhere Outside It

2 Answers2