Настройка 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/) несколько элементов настройки описаны Проблема заключается в том, что я не могу написать JavaScripts и JQuery, так что я понятия не имеют о том, как добавить, т.е. переход к сценарию.

Надежда кто-то может вести меня.

Marius

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:

Простой фрагмент:

$(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; 
}