Блог

Главная - Вопросы по программированию - Настройка bPupup

Настройка bPupup

#javascript #jquery #transitions #bpopup

#javascript #jquery #переходы #bpopup

Вопрос:

В настоящее время я пытаюсь получить 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, поэтому я понятия не имею, как, например, добавить переход в скрипт.

Надеюсь, кто-нибудь сможет меня направить.

Мариус

Ответ №1:

Попробуйте это

 #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;
}

Ответ №2:

Вам не нужно ничего писать.

Посмотрите, какой эффект перехода вы хотите, и поэтому измените эту строку:

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

Для (например):

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

Вам нужно только включить две библиотеки:

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

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