Открытие окна
Если нужно открыть окно во весь размер браузера, то создается кнопка, содержащая
следующий код
<input type="button" value=открыть-файл OnClick="location='18.jpg'">
Здесь name - адрес файла, который мы хотим увидеть в открывшемся окне. При этом окно
сайта с кнопкой закрывается.
Если нужно открыть окно с заданными размерами, используется метод window.open(), код
которого задается в скрипте. В круглых скобках указывается адрес нового окна, его
размеры и отступы (в данном случае - слева и сверху).
<script>
function opwind()
{
window.open("18.jpg","","width=450,height=350,left=300, top=200")
}
</script>
<body>
<input type="button" value=открыть-2 OnClick="opwind()">
Открытие окна в новой вкладке
Чтобы открыть новое окно, перейдя к новому файлу, можно выполнить операцию под названием
"открыть окно в новой вкладке".
Ключевым моментом в этой операции является использование псевдокласса 'target'. Если применить код
<a href="name.html" target="_blank"></a>
то откроется окно с фиксированным размером и фиксированным позиционированием.посмотрите
Закрытие окна
Закрыть окно можно по коду:
window.close()
Для возврата к исходному окну можно использовать код location
с указанием адреса адреса исходного окна.
Новое (модальное) окно
Можно создать свое окно без ссылки на внешний документ. Его именуют новым или модальным окном.
Такое окно может быть создано средствами либо JavaScript, либо CSS.
Для создания нового окна JavaScript используется код
var xow = window.open("","","width=400px,height=550,left=320, top=150,")
Обратим внимание, что для вывода информации в новом окне оно должно быть задано как переменная (xow).
Ее имя следует записывать перед кодом, задающим определенное событие в новом окне.
В новом окне все выводы следует делать методом document.write.
Если при выводе информации в динамическом режиме нужно сохранять размер окна
постоянным, используем вывод по document.body.innerHTML. В этом случае происходит
как бы замена одной страницы на другую.
Вопросы управления новым окном JavaScript
★ Открытие и закрытие нового окна
★ Вид нового окна
★ Имя нового окна
★ Фон нового окна, размер нового окна
★ Вывод текста, рисунка и таблицы в новом окне
★ Увеличение размера изображения в новом окне
★ Изменение шрифта в новом окне
★ Задержка в новом окне
★ Ссылка в новом окне
★ Внутренний стиль CSS в новом окне
подробно рассмотрены
Для создания нового окна CSS используется внутренний стиль (между тэгами
<style> и </style>). Код простейшего нового окна CSS содержит два идентификатора.
Идентификатор wind создает окно нужного размера с заданным позиционированием
в окне браузера. Идентификатор but создает создает кнопку закрытия окна.
<style>
#wind {
position: absolute;
display: none;
width: 400px;
height: 380px;
background-color: cyan;
border: 8px solid red;
border-radius: 30px;
margin-top: -375px; margin-left:350px;
}
#but{width:160px; height:30px; margin-top:1px;
margin-left:1px;font-size:17px; color:f0f; border-radius:10px;
border:3px solid brown; background-color:a6caf0
}
</style>
<body>
<a href="#" onclick="document.getElementById('wind').style.display='block';
return false;">Открыть окно</a> //открываем окно
<div id="wind">
<button id='but' onclick="document.getElementById('wind').style.display='none';
return false;"></button> //закрываем окно
</div>>
</body>
Посмотреть 1
Чтобы наполнить новое окно содержанием, сделаем, например, в нем увеличение размера картинки. Если
использовать тернарный оператор, это можно сделать только за счет CSS. Для этого к предыдущему коду
нужно добавить (между
тэгами <style> и </style>) следующие коды
#wind .a img{
width:100px;
}
#wind .b img{
width:320px;position: absolute;margin-top: 50px;margin-left:42px;
}
#tex
{
position: absolute;margin-top: -50px;margin-left:12px;
font-size:20px; color:cyan; font-weight: bold;
}
Посмотреть 2
кликни по фото
Можно производить действия в новом окне в динамическом режиме. С этой целью
нужно добавить скрипт, например, такой
<script>
function WG()
{
bb="<p align='center'><img id='ris' SRC='531.jpg' width=300 height=200 ></p>"
document.write(bb)
setTimeout("document.getElementById('ris').style.display='none'",3300)
bb1="<p align='center' id='ris18' style='position: absolute;margin-top: -15px;display:none;margin-left:65px;'><img SRC='18.jpg'
width=300 height=200 ></p>" //строку не разрывать
document.write(bb1)
setTimeout("document.getElementById('ris18').style.display='block'",3500)
setTimeout("document.getElementById('ris18').style.display='none'",5300)
aa2="<p align='center' id='tt2' style='display:none;font-size:25px;color:green'> Для повтора закрыть <BR>окно и обновить<BR>"
setTimeout("document.getElementById('tt2').style.display='block'",5500)
setTimeout("document.getElementById('but2').style.display='block'",5500)
document.write(aa2)
}
WG()
</script>
Обновить страницу и посмотреть 3
Можно использовать прикольный сюжет
<script>
function WG1()
{
bb="<p align='center'><img id='risa' SRC='9xWO.gif' width=300 height=250 ></p>"
document.write(bb)
setTimeout("document.getElementById('but4').style.display='block'",500)
setTimeout("document.getElementById('risa').style.display='none'",10000)
}
WG1()
</script>
Обновить страницу и посмотреть 4
Оглавление (простые скрипты для основных приложений JavaScript)
