×
Внимание, мошенник-работодатель (10 авг 2017)

Вниманию программистов Санкт-Петербурга, на SuperJob-е вновь активизировался Семен Григорьевич Шумейко..

Решено jQuery.bPopup.js. Мастерим всплывающие окна

Больше
3 года 2 нед. назад - 3 года 2 нед. назад #1 от Aleksej
Aleksej создал эту тему: jQuery.bPopup.js. Мастерим всплывающие окна
Как и обещал, краткая инструкция для желающих освоить работу с jQuery.bPopup.js.
Демка - в блоге , там же чуть более подробное описание и ссылки.

Все очень несложно; качаем с гитхаба и распаковываем архив, из которого нам понадобится, пожалуй, всего только один jquery.bpopup.min.js .

Скачали? - отлично; HTML, который вам необходимо разместить на своей web-страничке, может выглядеть примерно вот так:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.bpopup.min.js"></script>
<script src="js.js"></script>
<link rel="stylesheet" href="css.css" type="text/css" /> 
    
<!-- Button that triggers the popup -->
<button id="my-button">Жми сюда!</button>
<!-- Element to pop up -->
<div id="element_to_pop_up">
<a class="b-close">x<a/>
Content of popup
</div>

Версию jquery можно выбрать и поновее (это я так, по старой памяти 1.9.1 вписал), файлы js.js и css.css (натурально, обзовите как хотите) вам предстоит сделать самостоятельно. Не, ну как "сделать"... копипастните для начала с этой страничке, не смертельно, а потом, глядишь, и само пойдет. :)

Итак:

css
#element_to_pop_up { 
    background-color:#fff;
    border-radius:15px;
    color:#000;
    display:none; 
    padding:20px;
    min-width:400px;
    min-height: 180px;
}
.b-close{
    cursor:pointer;
    position:absolute;
    right:10px;
    top:5px;
}


js
// Semicolon (;) to ensure closing of earlier scripting
    // Encapsulation
    // $ is assigned to jQuery
    ;(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({
            speed: 650,
            transition: 'slideIn',
	    transitionClose: 'slideBack'
        });
		
            });

        });

    })(jQuery);


Ну вот, собственно, и все. Уже должно работать.
Последнее редактирование: 3 года 2 нед. назад от Aleksej.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.

Больше
2 года 11 мес. назад #2 от beginner
beginner ответил в теме jQuery.bPopup.js. Мастерим всплывающие окна
Привет, интересный плагин. Но что касается всплывающих окон для сайта на джумла, рулит по-моему rokbox. Позволяет вставить не только ссылку, по которой открывается pop-up-окно, но и thumbnail. Да и вообще, удобен.

Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе.