Простое всплывающее окно на сайте

На сайте часто нужно вывести информацию в шапке о режиме работы или контактах. Чтобы не нагромождать информацию, её можно разместить во всплавающем окне, которое выводится по клику на какой нибудь элемент.

Простое всплывающее окошко можно сделать с помощью CSS и jQuery.

Для это добавляем код html на сайт:

<div class="wrap">
    <div class="modal"></div>
    <div class="header">
        <a href="#">режим работы</a>
    </div>
</div>

<a href="#">режим работы</a>

</div>

Скрипт вставляем в шапку или футер:

$('a').on('click', function(e){
    e.preventDefault();
    $('.modal').toggleClass('active');
});

$('a').on('click', function(e){

e.preventDefault();

$('.modal').toggleClass('active');

});

И прописываем стиль для появления этого окошка.

.wrap {
    width:500px;
    margin: 0 auto;
    height:400px;
    background:red;
    position:relative;
}
.header {
    background:green;
    height:50px;
}
.modal {
    background:blue;
    height:200px;
    width:180px;
    position:absolute;
    right:10px;
    top:-210px;
    -webkit-transition: top 0.5s;
    -moz-transition: top 0.5s;
    -o-transition: top 0.5s;
    transition: top 0.5s
}
.modal.active {
    top:10px;
}

.wrap {

width:500px;

margin: 0 auto;

height:400px;

background:red;

position:relative;

}

.header {

background:green;

height:50px;

}

.modal {

background:blue;

height:200px;

width:180px;

position:absolute;

right:10px;

top:-210px;

-webkit-transition: top 0.5s;

-moz-transition: top 0.5s;

-o-transition: top 0.5s;

transition: top 0.5s

}

.modal.active {

top:10px;

}

Источник кода взят тут: http://jsfiddle.net/iiil/7Ly6y/3/

Рекомендуем еще эти статьи

28.05.2020

Удалить поле URL (сайт) из формы комментариев в WordPress

Записываем в functions.php следующий код

// Удаляем URL из формы отправки комментариев
add_filter('comment_form_default_fields', 'sheens_unset_url_field');
function sheens_unset_url_field ( $fields ) {
  if ( isset($fields['url'] ))
  unset ( $fields['url'] );
  return $fields;
}

// Удаляем URL из формы отправки комментариев

add_filter('comment_form_default_fields', 'sheens_unset_url_field');

function sheens_unset_url_field ( $fields ) {

if ( isset($fields['url'] ))

unset ( $fields['url'] );

return $fields;

}

Если не сработает, то, скорее всего, в теме есть...

03.04.2023

Как подсчитать занятое место на хостинге

Иногда место на хостинге заканчивается, и тогда встает вопрос, как посмотреть кто виновник. Особенно это...

29.12.2022

Кнопка НАЗАД на Android закрывает модальное окно

Необходимо было сделать, чтобы модальное окно открывалось на смартфоне во всю ширину экрана. Поэтому пользователи...

18.02.2022

Шорткод для отображения шаблонов Oxygen

Для того, что бы вывести Re-usable part в любом месте на сайте через шорткод, нужно...

11.10.2022

Добавление атрибутов Woocommerce в карточку товара созданную в Oxygen

Столкнулся с такой проблемой, что созданные атрибуты в Woocommerce не выводятся в карточке товаров которая...

04.02.2020

Полезные плагины для WordPress

Ultimate Member — плагин для создания сообществ и пользовательских профилей в WordPress. https://ultimatemember.com/ и https://wordpress.org/plugins/ultimate-member/....