31.07.15 
8049 
Правильность определяется оптимальностью решения (имхо) при многих ссылках (исключение избыточности кода и снижение серверной нагрузки при формировании повторяющегося кода (буде серверное формирование имеется), а также сохранение работоспособности ссылок при отключении 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 | Загрузок: 205
Нет комментариев к этой статье.