Создание кнопки и нового окна при помощи Javascript

Привет! Сегодня предлагаю заняться простеньким JS скриптом, генерирующим новое окно, которое будет открываться по нажатию кнопки, расположенной в любом месте страницы. Это довольно простой код, но он является весьма полезным навыком, который может быть применен в различных ситуациях...

Как я уже сказал, тут нет ничего сложного: давайте разберем вариант кода (разбираемый код):

Для начала, опишем оригинальную страницу (Head и title):

<html>
<head>
<title>Пишем подокно</title>

Здесь мы лишь указали название страницы. Теперь же в теле head добавим наш скрипт, в котором запишем функцию создания нового окна и его параметры:

<script type="text/javascript">
var newWindow;
function makeNewWindow(){
newWindow= window.open("","","status,height=200,width=300")
}
function subWrite(){
//Создается новое окно в том случае, если его кто-то закрыл
makeNewWindow();

Теперь, когда окно создано, нам необходимо сделать так, чтобы оно вызывалось на верхний слой при помощи применения focus().

newWindow.focus();

Но пока мы создали лишь пустое окно без содержимого. А это не совсем то, что нам требуется. Поэтому есть предложение создать содержимое для нашего документа, добавив html в значение переменной.

! Важное замечание! Посмотрите, когда мы определяем ниже переменную newContent , не обязательно записывать ее всю сразу и целиком. Это неудобно и не всегда возможно. Для того, чтобы разбить на несколько строк и не повторять старые строчки при добавлении новых, можно использовать конструкцию "+=" (как в примере ниже) - она добавит к исходному значению новое...

var newContent = "<html><head><title>Новый документ</title></head>";
newContent += "<body bgcolor='coral'><h1>Это новый документ.</h1>";
newContent += "</body></html>"

Осталось лишь вывести значение переменной в наше созданное окно и закрыть script и head:

newWindow.document.write(newContent);
newWindow.document.close()//закрываем
}
</script>
</head>

Итак, новое окно создано, однако мы еще не прописали, при каких условиях оно будет открываться. О том, как добавить javascript в wordpress  я расскажу в будущем, а пока потренируемся на голом html.

Для удобства, еще раз ссылка на файл с кодом

Естественно, что описание самого способа открытия нового окна мы будем задавать в <body> нашей страницы. Предлагаю сделать это при помощи реализации простенькой кнопочки таким вот образом:

<body >
<form>
<input type="button" value="В подокно" onclick="subWrite()">
</form>
</body>
</html>

То есть, создали кнопочку, а на onclick (клик по кнопке) - вызываем функцию subWrite().

Вуаля, окно с данными открывается!