动态更改 bPopup 选项以禁用/启用以下答案

【问题标题】：change bPopup options dynamically to disable/enable following动态更改 bPopup 选项以禁用/启用以下
【发布时间】：2016-02-11 16:17:17
【问题描述】：

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

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

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

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

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

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

提前非常感谢！

【问题讨论】：

标签： javascript dynamic plugins jquery-plugins bpopup

【解决方案1】：

好的。这比我想象的要简单得多...... 只需找到弹出的 div，处理它的“bPopup”数据属性并更改跟随属性。

解决方案：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>

【讨论】：