{
window.open(this.href,'…','…');
return false;
}
window.onload = function()
{
var lnks = document.getElementsByTagName('A')
for(var i = 0; i < lnks.length; i++)
if(/\bpopup\b/.test(lnks[i].className))
lnks[i].onclick = handlePopupClick;
}
В данном примере параметры нового окна (размеры, имя окна и т.д.) будут одинаковыми у всех ссылок, но при желании это можно изменить — к примеру, определить стандартные параметры, и отклонения от них указывать атрибутами ссылки. Основной же минус в том, что эти ссылки будут открывать новые окна только после полной загрузки документа, а до этого они будут работать как обычные ссылки. Кроме того, если на странице много ссылок, то на их проверку уйдет некоторое время, что выражается в "подвисании" браузера при окончании загрузки страницы.
сlass="popup", document.onclick
Вспомним, что события всплывают, и отловить их можно на самом верхнем уровне. Поэтому будем перехватывать все клики в документе, и если это клик по ссылке class ="popup", то будем открывать новое окно.
<a href="popup.html" class="popup">Новое окно</a>
document.onclick = function(e)
{
e = e || event;
var t = e.target || e.srcElement;
if (t.tagName.toLowerCase() == 'a' && /\bpopup\b/.test(t.className))
{
window.open(t.href,'…','…');
return false;
}
return true;
}
Здесь отсутствуют минусы предыдущего способа. При сложной разметке сайта следует, однако, учитывать, что клик может произойти не на самой ссылке, а на одном из его дочерних элементов (на картинке, к примеру). В этом случае нужно переходить от t к родительским элементам по цепочке, пока не будет найдена ссылка:
document.onclick = function(e) {
e = e || event;
var t = e.target || e.srcElement;
while (t && t.nodeType == 1 && t.tagName.toLowerCase()!= 'a')
t = t.parentNode;
if (t && t.nodeType == 1 && /\bpopup\b/.test(t.className)) {
window.open(t.href,'…','…');
return false;
}
return true;
}
Разумеется, в двух последних способах не обязательно определять ссылки, которые должны открывать новые окна, с помощью класса. Вариантов может быть много. Например, если на вашем сайте все попапы открываются по адресу /popup/что-то…, то можно определять проверять наличие этого пути в атрибуте href ссылки
Модальное окно
В HTML-документе допустимо создание модального окна для просмотра, т.е. такого окна, которое будет активным до тех пор, пока пользователь не закроет. Подобные окна часто применяются для создания пользовательских окон ввода информации или окна About. Модальное окно открывается
методом showModalDialog() объекта window.
Синтаксис:
showModalDialog (sURL [, vArguments [, sFeatures]])
◦ sURL — URL документа, загружаемого в модальное окно;
◦ vArguments — передает в диалоговое окно произвольный набор параметров. Непосредственная передача данных производится метод diaiogArguments объекта window. Возврат значений из диалогового окна в документ реализуется свойством returnvalue объекта window.
◦ sFeatures — параметры, задающие внешний вид окна; допустимые значения:
§ dialogWidth: number — ширина окна;
§ dialogHeight: number — высота окна;
§ diaiogTop: number — ордината верхнего левого угла окна;
§ diaiogLeft: number — абсцисса верхнего левого угла окна;
§ center: { yes | no | 1 | 0 } — расположение окна по центру экрана.
Пример:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script>
window.showModalDialog ("script1.html","dialogHeight:100; dialogWidth:200; center:no");
</script>
</body>
</html>
Не все браузеры хорошо работают с модальными окнами.
Для начала немного про ООП
В JavaScript’е объект можно создать двумя способами. Первый способ создание функции. В JavaScript объектом является любая функция:
function Obj() { // объекты принято называть с большой буквы
this.x = 1;
this.y = 2
Ключевое слово this является ссылкой на объект Obj, this.x и this.y – это его свойства Obj, т.е., говоря просто, это локальные переменные которые действуют только внутри объекта Obj. Так же у объекта есть методы. Метод – это функция внутри объекта. Работает она тоже только внутри него. У каждого объекта в JavaScript есть свойство prototype, при помощи которого можно добавлять новые методы объекту:
function Obj(x, y) { // объявляем объект
this.x = x; // добавляем свойство X равное параметру x, переданному в функцию
this.y = y; // добавляем свойство Y равное параметру y, переданному в функцию
}
Obj.prototype.method = function() { // добавляем метод
return this.x + this.y; // который будет возвращать сумму двух свойств
}
Мы создали наш объект и добавили ему свойства и метод, теперь осталось только создать его и начать использовать. Объект создается при помощи ключевого слова new, и может быть присвоен переменной или использоваться сразу:
//можно так
var o = new Obj(4, 5);