0

我正在使用一个名为bPopup的 jQuery 插件，它接收一个 jQuery 对象并创建一个弹出元素。

它是使用如下所示的选项元素构造的：

{
    modalClose: false, 
    modalColor: "#ffffff",
    follow: [false, false] // Follow x, follow y
}

我想动态更改弹出窗口中的“跟随”属性，而不是重新创建弹出窗口或克隆它，而是实际更改现有的弹出窗口。

换句话说：我希望在滚动时跟随弹出窗口，并且能够在需要时暂停跟随。

显示问题的小提琴： https ://jsfiddle.net/syoels/9tqcaq7m/11/

提前非常感谢！

4

1 回答 1

0

Ok. It was much simpler than I thought... just find the popped up div, address it's 'bPopup' data attribute and change the follow property.

Working fiddle with the solution: https://jsfiddle.net/syoels/ydu5s9zu/

$(document).ready(function() {

  $('#popupBtn').click(function() {
    var popup_div = $('<div id="popup"><p>Holy guacamole! what a gorgeous popup!<br><br>scroll down and see if it follows you</p>			<button id="stopFollowingBtn">Toggle follow</button></div>');

    popup_div.bPopup({
      follow: [true, true], //x, y
      opacity: 0.6,
      modalColor: 'greenYellow',
    });

    $('#stopFollowingBtn').click(function() {
      var follow_x = $('#popup').data('bPopup').follow[0];
      var follow_y = $('#popup').data('bPopup').follow[1];
      $('#popup').data('bPopup').follow = [!follow_x, !follow_y];
    });

  });




});
body {
  background: black;
  height: 1000px;
}
#popup {
  display: none;
  position: absolute;
  width: 140px;
  height: 200px;
  background: #ccc;
  text-align: center;
  border: 2px solid white;
  border-radius: 3px;
  box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);
}
#popupBtn {
  display: block;
  margin: 10px auto;
}
#stopFollowingBtn {
  background: red;
  color: white;
  font-weight: bold;
  cursor: pointer;
  padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bPopup/0.11.0/jquery.bpopup.js"></script>

<body>
  <button id="popupBtn">show popup</button>
</body>

于 2016-02-22T15:36:04.463 回答