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.

Answer 1

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>

Answer 2

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>