marwej marwej - 2 months ago 5
jQuery Question

Setting up bPupup

I'm currently trying to get bPopup (http://dinbror.dk/blog/bPopup/) to work on my page.
I've found this jsFiddle (http://jsfiddle.net/24A9b/) which shows to get the script to work. Using following code:
;(function($) {

// DOM Ready
$(function() {

// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#my-button').bind('click', function(e) {

// Prevents the default action to be triggered.
e.preventDefault();

// Triggering bPopup when click event is fired
$('#element_to_pop_up').bPopup();

});

});

})(jQuery);


But i want to get a little more fancy.
On this page (http://dinbror.dk/bpopup/) is several customization elements described. The problem is that i can't write javascripts and jQuery so i have no clue of how to i.e. add a transition to the script.

Hope somebody can guide me.

Marius

Answer

You do not need to write anything.

See the transition effect you want and so change this line:

$('#element_to_pop_up').bPopup();

To (for instance):

$('#element_to_pop_up').bPopup({
    speed: 650,
    transition: 'slideIn',
    transitionClose: 'slideBack'
});

You need only to include the two libraries:

A simple snippet:

$(function() {

  // Binding a click event
  // From jQuery v.1.7.0 use .on() instead of .bind()
  $('#my-button').bind('click', function(e) {

    // Prevents the default action to be triggered. 
    e.preventDefault();

    // Triggering bPopup when click event is fired
    $('#element_to_pop_up').bPopup({
            speed: 650,
            transition: 'slideIn',
	    transitionClose: 'slideBack'
    });

  });

});
#element_to_pop_up { 
  background-color:#fff;
  border-radius:15px;
  color:#000;
  display:none; 
  padding:20px;
  min-width:400px;
  min-height: 180px;
}
.bClose{
  cursor:pointer;
  position:absolute;
  right:10px;
  top:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/dinbror/bpopup/master/jquery.bpopup.min.js"></script>

<!-- Button that triggers the popup -->
<button id="my-button">POP IT UP</button>
<!-- Element to pop up -->
<div id="element_to_pop_up">
    <a class="bClose">x<a/>
    Content of popup
</div>

Comments