Как создать и настроить свой веб-сервер на VDS (05 сен 2024)

Осенью самое время заняться установкой и тюнингом своего веб-сервера. Не правда ли?

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

Aleksej
Автор темы
Не в сети
Модератор

Больше

10 года 4 мес. назад - 10 года 4 мес. назад #1 от Aleksej

Aleksej создал тему: jQuery.bPopup.js. Мастерим всплывающие окна

Как и обещал, краткая инструкция для желающих освоить работу с jQuery.bPopup.js.
Демка - в блоге , там же чуть более подробное описание и ссылки.

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

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

Code:

<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

Code:

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

Code:

// 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);

Ну вот, собственно, и все. Уже должно работать.

Последнее редактирование: 10 года 4 мес. назад пользователем Aleksej.

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

beginner
Не в сети
Захожу иногда

Больше

10 года 4 мес. назад #2 от beginner

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

Привет, интересный плагин. Но что касается всплывающих окон для сайта на джумла, рулит по-моему rokbox. Позволяет вставить не только ссылку, по которой открывается pop-up-окно, но и thumbnail. Да и вообще, удобен.

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

cool guy
Не в сети
Осваиваюсь на форуме

Больше

7 года 2 мес. назад #3 от cool guy

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

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

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

serge
Не в сети
Модератор

Больше

7 года 2 мес. назад #4 от serge

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

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

меняем

Code:

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

на

Code:

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

и вместо

Code:

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

пишем

Code:

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

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

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

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

Работает на Kunena форум