javascript - 弹出模式不要跳动

Question

我使用 Jquery 创建了一个弹出模式，我对此有三个问题。

1. 现在，我可以在单击按钮时关闭弹出窗口，但我也希望在单击弹出窗口外部时将其关闭。

2. 当用户关闭页面中间的弹出窗口时，我希望页面保持在原来的位置，而不是跳回顶部。

3. 一旦用户点击弹出窗口附近的按钮，它就不会再次出现。我猜我可能需要再写一个条件语句。

你们有什么提示或文档我可以查看吗？很抱歉问了很多问题。我对网络开发还是个新手。

谢谢，下面是我的代码。

    $(document).scroll(function(){
    var a = $(this).scrollTop();
    if (a > 500) {
        $("#mc_embed_signup").fadeIn();
    } else 

    $(".popup-close").click(function(e){
            closeSPopup();
        });
});

function closeSPopup(){
    $("#mc_embed_signup").fadeTo(0);
}

Answer 1

0 JS 和您需要的所有功能怎么样？
基本上使用 checkboxes 和 label 元素。

.modalToggler, 
.modalOuter,
.modal {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transition: 0.4s;
}
.modalToggler:checked + .modalOuter,
.modalToggler:checked + .modalOuter + .modal{
  visibility: visible;
  opacity: 1;
}
.modalOuter {
  position: fixed;
  top:0; right:0; bottom:0; left:0; 
  background: rgba(0,0,0,0.6);
}
.modal {
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  padding: 24px;
  background: #fff;
  max-width: 300px;  /* as needed */
}
.modalClose {
  position: absolute;
  padding: 4px 8px;
  top: 0; right: 0;
  cursor: pointer;
}

<!-- MY MODALS -->

<input id="modal1" class="modalToggler" type="checkbox">
<label for="modal1" class="modalOuter"></label>
<div class="modal">
  <label for="modal1" class="modalClose">&#x2716;</label>
  Hello, World
</div>

<input id="modal2" class="modalToggler" type="checkbox">
<label for="modal2" class="modalOuter"></label>
<div class="modal">
  <label for="modal2" class="modalClose">&#x2716;</label>
  How cool is that?
</div>

<!-- !MY MODALS -->


<label for="modal1"><a>SHOW-MODAL1</a></label>

<label for="modal2"><a>SHOW-MODAL2</a></label>

滚动的 JS!

现在让我们通过添加一点点 jQuery 来添加滚动部分，仅此而已:

$(window).on("scroll", function(){
    var st = $(this).scrollTop();
    if (st > 500) {
        $("#modal1").attr("checked", true);
    }
});

.modalToggler, 
.modalOuter,
.modal {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  transition: 0.4s;
}
.modalToggler:checked + .modalOuter,
.modalToggler:checked + .modalOuter + .modal{
  visibility: visible;
  opacity: 1;
}
.modalOuter {
  top:0; right:0; bottom:0; left:0; 
  background: rgba(0,0,0,0.6);
}
.modal {
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  padding: 24px;
  background: #fff;
  max-width: 300px;  /* as needed */
}
.modalClose {
  position: absolute;
  padding: 4px 8px;
  top: 0; right: 0;
  cursor: pointer;
}

<!-- MY MODALS -->

<input id="modal1" class="modalToggler" type="checkbox">
<label for="modal1" class="modalOuter"></label>
<div class="modal">
  <label for="modal1" class="modalClose">&#x2716;</label>
  <h3>Get 30%</h3>
  <p>On every book from our shelf</p>
  <p><button>APPLY NOW!</button></p>
</div>

<!-- !MY MODALS -->

<div style="border:4px dashed #000; height: 300vh"> <!--Demo sytles! Don't ever inline CSS-->
   <label for="modal1"><a>SHOW-MODAL1</a></label>
   
   <p>Scroll down.......</p>
</div>

<script src="//code.jquery.com/jquery-3.1.0.js"></script>