Как создать всплывающее окно на Jquery своими руками

Здравствуйте, сегодня я хочу вам рассказать немного о том, как же самостоятельно сделать всплывающее окошко c любым контентом на фреймворке JQuery.

Что же, для начала нам нужно само окно. Мы будем использовать position: fixed; Ниже я приведу вам его пример:

1.HTML

<div id="popup" class="popupclass">
<a href="#" class="lightbox-close" onclick="$(this).parent().hide('slow'); return false;">
  <span style="display:none;">Close</span>
</a>
<div id="form-popup">Здесь любой контент.</div></div>

2.CSS

/*ВСПЛЫВАЮЩАЯ ФОРМА*/

.lightbox-close { 
background-image: url("/form/lightbox-close.png");
background-position: 0% 0%;
background-repeat: no-repeat;
height: 25px;
position: absolute;
right: -10px;
top: -10px;
width: 25px;
 }
 
.popupclass {
display:none; background-color: #fff; padding: 10px; z-index: 999; height: 100%;
left: 50%;
margin-left: -210px; // ПОЛОВИНА от WEIGHT для центрального позиционирования
margin-top: -160px; // ПОЛОВИНА от HEIGHT для центрального позиционирования
height: 329px;
width: 420px;
position: fixed;
top: 50%; 
border: 1px solid #ccc;
}

3.Подключаем Jquery библиотеку

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

4.Подключаем наш скрипт

<script type="text/javascript">
$(document).ready(function()
 {
$("#trigger").click(function(){ 
$("#popup").show("slow")
return false;
});
 	});
</script>

5.Вставляем ссылку всплывающего окно на сайт

<a href="#" id="trigger">Всплывающая окно на Jquery</a>

Готово! Посмотреть ДЕМО работу скрипта вы можете по ссылке ниже:

ДЕМО


Понравилась статья? Расскажи друзьям

Нас ищут по следующим запросам:

    Ошибка базы данных WordPress: [Table 'u2670440_default.wp_referers' doesn't exist]
    SELECT url, sum(hits) as sum_hits FROM wp_referers WHERE not (search like '%??%') GROUP BY url ORDER BY sum_hits desc LIMIT 0, 16

Вы можете оставить комментарий, или ссылку на Ваш сайт.
  • Test

    не работает

  • Ptim

    При ровных руках идеально работает:)

  • Tio

    привет. что то не могу довести до ума((( помогите пожалуйста