change bPopup options dynamically to disable/enable following

597 Views Asked by syoels At 04 April 2025 at 12:11

I'm using a jQuery plugin called bPopup , which receives a jQuery object and creates a popup element.

it is constructed using an options element that looks like this:

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

I want to change the "follow" property within the popup dynamically, without re-creating the popup or cloning it, but actually changing the existing popup.

in other words: I want the popup to follow when scrolling, and be able to pause that following when desired.

A fiddle displaying the problem: https://jsfiddle.net/syoels/9tqcaq7m/11/

Thanks a lot in advance!

Original Q&A

There are 1 best solutions below

syoels On 22 February 2016 at 15:36

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>

change bPopup options dynamically to disable/enable following

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in DYNAMIC

Related Questions in PLUGINS

Related Questions in JQUERY-PLUGINS

Related Questions in BPOPUP

Trending Questions

Popular # Hahtags

Popular Questions