Question

我能够成功添加一个在页面加载时自动加载的弹出窗口：

＆＃13;

//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);
  });
});

＆＃13;

/*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;
}

＆＃13;

<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>

＆＃13;

（按How do I make an image automatically popup on my main page when someone goes to it?的说明），

但是，我想知道如何修改javascript，以便在您点击它之外的任何位置时关闭它，而不是单击按钮来关闭弹出窗口。

Answer 1

您只需添加一个div（例如.mask），它将位于弹出窗口下方。（您可以使用不透明度添加背景，仅用于效果）。

如果单击它（或按钮），则隐藏弹出窗口。

＆＃13;

//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);
  });
});

＆＃13;

/*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;
}

＆＃13;

<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>

＆＃13;

Answer 2

就我而言，我只是将所有内容放入div并使用onClick！重要的是要使用位置：绝对位置和顶部位置：0。这是在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>

通过单击外部任意位置关闭弹出窗口

2 个答案: