Pop-up

Опять JavaScript. Спрашивают иногда, как центрировать pop-up и загружать в него картинку + как его закрывать при щелчке на каринке?

Написать функцию:

function Popup_Open(url, width, height){
var left=(screen.width-width)/2;      // определяется левая позиция
var top=(screen.height-height)/2;      //определяется верхняя позиция
// html в котором вставляем картинку со ссылкой закрывающей pop-up
var html = "<html> <head> <title>pop-up</title> </head>";
html += "<body style=\"padding:0px; margin:0px;\">";
html += "<a href=\"#\" onclick=\"window.close();\">";
html += "<img src=\"" + url + "\" style=\"border:none\" /></a>";
html += "</body></html>";
// сам pop-up
var popup = open("", "popup", "height="+height+", width="+width+", top="+top+", left="+left+", location=no, toolbar=no, scrollbars=no, resizable=no, menubar=no, status=no");
// записываем в pop-up html код.
popup.document.write(html);
}

А вызываем эту функцию в ссылке. Указываем параметры: адрес, ширину и высоту картинки.

<a href="#" onclick="Popup_Open('riga.jpg', 700, 525)">
    <img src="riga_sm.jpg" />
</a>

Удобно. Но pop-up'ы - прошлый век, который блокируется браузерами. Ну а если очень хочется, то можно.

Скачать исходник

Updated: Скрипт не работал в IE6. Надо создавать переменные с помощью var. Теперь всё Ок.

Дата: 08.02.2007
»
Категории: Скриптинг
Google     

]]> Игорь ]]>

советую чуть изменить код самой ссылки:

<a href=”riga.jpg” target=”_blank” onclick=”Popup_Open(’riga.jpg’, 700, 525); return false;”>
<img src=”riga_sm.jpg” />
</a>

чтобы в случае, если JS по каким-либо причинам не работает, пользователь все равно имел возможность просмотреть картинку

»

]]> Игорь ]]>

я тут ещё чуть подумал…

<a href=”riga.jpg” target=”_blank” onclick=”Popup_Open(this.href, 700, 525); return false;”>
<img src=”riga_sm.jpg” />
</a>

»

Напишите комментарий