我目前正在尝试使bPopup（http://dinbror.dk/blog/bPopup/）在我的页面上工作。
我找到了这个jsFiddle（http://jsfiddle.net/24A9b/），它显示了如何使脚本正常工作。使用以下代码：
;（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);
但我想多花一点。
在此页面（http://dinbror.dk/bpopup/）中描述了几个自定义元素。问题是我不能编写javascript和jQuery，所以我不知道如何添加脚本的过渡。
希望有人可以指导我。
马吕斯
最佳答案
您不需要写任何东西。
查看所需的过渡效果，然后更改此行：
$('#element_to_pop_up').bPopup();
到（例如）：
$('#element_to_pop_up').bPopup({
speed: 650,
transition: 'slideIn',
transitionClose: 'slideBack'
});
您只需要包括两个库：
jQuery：https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
bpopup：https://rawgit.com/dinbror/bpopup/master/jquery.bpopup.min.js
一个简单的代码段：
$(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>关于javascript - 设置bPupup，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39806892/