×
HeadHunter and Superjob rezume updater on Ruby on Rails (21 авг 2017)

Практикуемся в написании кода под rails.

Решено 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.

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

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

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

Больше
4 дн. 18 ч. назад #3 от cool guy
cool guy ответил в теме jQuery.bPopup.js. Мастерим всплывающие окна
Мне нужно несколько popup на одной странице, размещаю код как сказано выше, но открывается только первое popup. Как решить эту проблему?

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

Больше
4 дн. 17 ч. назад #4 от serge
serge ответил в теме jQuery.bPopup.js. Мастерим всплывающие окна

cool guy пишет: Мне нужно несколько popup на одной странице, размещаю код как сказано выше, но открывается только первое popup. Как решить эту проблему?


меняем
$('#my-button').bind('click', function(e) {

на
$('.my-button').bind('click', function(e) {

и вместо
<button id="my-button">Жми сюда!</button>

пишем
<button class="my-button">Жми сюда!</button>


Пример: jsfiddle.net/yg5so25s/2/

А я смогу! - А поглядим! - А я упрямый!

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