设置bPupup

Question

我目前正试图让bPopup（http://dinbror.dk/blog/bPopup/）在我的页面上工作。 我找到了这个jsFiddle（http://jsfiddle.net/24A9b/），它显示让脚本能够工作。使用下面的代码：。 ;（函数（$）{

 // 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的，所以我不知道该怎样来即过渡添加到脚本的线索。

希望有人能指导我。

马吕斯

Answer 1

你不需要写任何东西。

看到你想要的过渡效果，因此改变这一行：

$('#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', 
 
\t  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>

Answer 2

试试这个

#element_to_pop_up { 
    background-color:#fff; 
    border-radius:15px; 
    color:#000; 
    display:none; 
    padding:20px; 
    min-width:400px; 
    min-height: 180px; 

    box-shadow: 0 0 25px 5px #999; 
} 
.bClose{ 
    cursor:pointer; 
    position:absolute; 
    right:10px; 
    top:5px; 
    border-radius: 7px 7px 7px 7px; 
box-shadow: none; 
font: bold 131% sans-serif; 
padding: 0 6px 2px; 
position: absolute; 
right: -7px; 
top: -7px; 
background-color: #2b91af; 
}