js Всплывающее окно на jQuery правильно 

Дата публикации  Дата изменения31.07.15  КомментарииНет   Просмотры1953

Правильность определяется оптимальностью решения (имхо) при многих ссылках (исключение избыточности кода и снижение серверной нагрузки при формировании повторяющегося кода (буде серверное формирование имеется), а также сохранение работоспособности ссылок при отключении js/jQuery. Дополнительная информация (параметры) по окну передается в пользовательских атрибутах.

Пример использования:

Между <head></head>:

<meta charset="utf-8" />
<title>Всплывающее окно на jQuery правильно</title>
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>

Между <body></body>:

<div style="text-align: center">

<h1>Всплывающее окно на jQuery правильно</h1>

<a href="popup1.html" data-width="600" data-height="400" title="Новое окно 1" class="popup">Ссылка 1</a><br><br>
<a href="popup2.html" data-width="600" data-height="400" title="Новое окно 2" class="popup">Ссылка 2</a><br><br>
<a href="popup3.html" data-width="600" data-height="400" title="Новое окно 3" class="popup">Ссылка 3</a><br><br>

</div>

<script type="text/javascript">
$(function(){
   $(".popup").click(function(event){
   event.preventDefault();
   var href = $(this).attr("href");
   var width = $(this).attr("data-width");
   var height = $(this).attr("data-height");
   var popup = window.open (href, "popup", "height=" + height +", width=" + width + "");
   });
});
</script>

*Источник: Брайан Хоган, "HTML5 и CSS3. Веб-разработка по стандартам нового поколения"

UPD: выводим по центру экрана ↴

<script type="text/javascript">
$(function() {
$(".popup").click(function(event){
   event.preventDefault();
   var href = $(this).attr("href");
   var width = $(this).attr("data-width");
   var height = $(this).attr("data-height");
   var popup = window.open (href, "popup", "height=" + height +", width=" + width + ", top="+((screen.height-height)/2)+",left="+((screen.width-width)/2)+", resizable=yes, scrollbars=no, status=yes");
   });
             });
</script>

 Смотреть пример

  Размер:  33,54kB | Изменен: 24.05.15 | Загрузок: 34

Бесплатные курсы

Категории

Теги: , , , , , , , ,

Оцените материал:

Рейтинг: 0.0/10 (0)


КомментарииКомментарии:

Нет комментариев к этой статье.


Поля, обозначенные как *, обязательны.





Максимальная длина сообщения 900 символов. Осталось   символов

 

Старые →← Новые