Question

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

它是使用如下所示的options元素构建的：

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

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

换句话说：我想在滚动时关注弹出窗口，并且能够在需要时暂停关注。

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

提前多多感谢！

Answer 1

确定。它比我想象的要简单得多...... 找到弹出的div，解决它的问题＆＃39; bPopup＆＃39; data属性并更改follow属性。

解决问题的方法：https://jsfiddle.net/syoels/ydu5s9zu/

＆＃13;

$(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];
    });

  });




});

＆＃13;

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

＆＃13;

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

＆＃13;

动态更改bPopup选项以禁用/启用跟随

1 个答案: