Открыть и закрыть отдельное окно

mychatik

mychatik

Постоялец
Регистрация
28 Авг 2011
Сообщения
47
Реакции
24
Встала задача - по клику на кнопку, открыть в новом окне картинку.
Далее, по клику по родительскому окну, либо по дочернему (а лучше оба варианта) это окно с картинкой должно закрыться.
Я так понимаю, что без javascript эту задачу не решить.
Пытаясь самостоятельно найти решение, я набрёл на вот такой скрипт:
Код: 
function ShowWin(src, width, height){
obj = window.open("", "", "scrollbars=0,dialog=0,minimizable=1,modal=1,width="+width+",height="+height+",resizable=0" ) ;
obj.document.write("<html>" ) ;
obj.document.write("<img src=\""+src+"\" />" ) ;
obj.document.write("</html>" ) ;
this.onfocus=function(){obj.close();}
}
Этот скрипт, судя по описанию, по клику открывает окно заданных размеров с картинкой и по клику на родительском окне - закрывает его. То есть, практически всё то, что мне нужно.
Но возникли сразу вопросы.
Я только пытаюсь изучать javascript, поэтому прошу помощи у Гуру :)

Самый главный вопрос:
Как его применить? Т.е. прикрепить скрипт к вот такой кнопке?
HTML: 
<a href="ссылка"><img src="</knopka.gif" width="20" height="100"></a>
И второй вопрос - если возможно, как его модифицировать, чтобы дочернее окно закрывалось и по клику на родительском окне, и по клику на него само?
 
  • Нравится
Реакции: estr
Очень просто...

Первый параметр - ссылка с которым разбирается с параметрами отображения на сайте
Второй параметер - длина всплывающего окна
и Третьий параметер - высота всплывающего окна

Пример:
HTML: 
<a href="#" onclick="ShowWin('какая-то ссылка на текущем сайте',800,640);return false;"><img src="/knopka.gif" width="20" height="100"></a>
 
Последнее редактирование:
не пойдет такое?

<script type="text/javascript">
var newwin = '';
var tinczcounter=0;
function openwin(){
newwin = open('');
newwin.document.open();
newwin.document.writeln("<h1 id='id_for_new'>Окно открыто</h1>");
}
function change(param1){
tinczcounter++;
newwin.document.getElementById('id_for_new').innerHTML=newwin.document.getElementById('id_for_new').innerHTML+' '+param1+''+tinczcounter;
}
function closewin(){
newwin.close();
}
</script>
<input type="button" value="Шаг1: Открыть дочернее окно" onclick="openwin()">
</br>
<input type="button" value="Тынц" onclick="change('Тынц')">
</br>
<input type="button" value="Закрыть дочернее окно" onclick="closewin()">
 
Только вопрос - а точно надо картинку в новом окне открывать? для этого можно в рамках одной страницы использовать дивы( jquery ui - popup - готовое решение со всеми плюшками), и показывать в виде попапа. гораздо кошернее во всех смыслах.
Это я про то, что наплодив новые окна браузера-имеем ряд проблем, начиная от ресурсоёмкости и заканчивая юзабилити.
 
Всё это немного не то...
То, что предлагаетДля просмотра ссылки Войди или Зарегистрируйся, это обычная ссылка через скрипт. Это я делал. Да, откроет мне окно заданных размеров, но а закрыть?
2Для просмотра ссылки Войди или Зарегистрируйся - да, окно это, или попап - не суть важно. Мне нужно по запросу открыть картинку-подсказку. Всё. А закрывать мне уже кнопочка не нужна... Закрыть надо по клику, либо в любом месте родительского окна, либо по дочернему... В идеале, окно (либо что-то другое) должно открыться по клику (либо наведению курсора) на кнопку и закрыться, при повторном клике в любом месте любой страницы...

У меня уже была мысль вообще вставить подсказку в title кнопки:
HTML: 
<img src="/knopka.gif" width="20" height="100" border="0" alt="" title="/kартинка.gif">
Подобное решение я видел где-то на каком-то сайте. Но, как я понимаю, по крайней мере, это не валидно. На htmlbook пишется, что атрибут title="текст" и его значения - любая текстовая строка.

Открыть второе окно - в данном случае не проблема, а чтоб оно в дальнейшем не висело, мне и надо его безусловное закрытие после повторного клика.
Я ещё с обычным javascript не разобрался полностью... Изучаю всё сам, по мере возникновения необходимости... До jquery - мне ещё далеко...
Да и это решение - тоже не то, что нужно.
Судя по примерам использования,
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

окно не закрывается само по клику. Для закрытия, всё равно нужно жать на кнопку...
Хотя анимированное открытие окна - мне понравилось :)

В принципе, меня устраивает решение из моего поста... Просто есть сомнения.

Если я напишу так:
HTML: 
<script type="text/javascript">
function ShowWin(сайт/kартинка.gif, 350, 350){
obj=window.open("", "", "scrollbars=0,dialog=0,minimizable=1,modal=1,width="+width+",height="+height+",resizable=0");
obj.document.write("<html>");
obj.document.write("<img src=\""+src+"\" />");
obj.document.write("</html>");
this.onfocus=function(){obj.close();}
}
</script>

<a href="#" onclick="ShowWin();return false;"><img src="/knopka.gif" width="20" height="100"></a>
или
HTML: 
<script type="text/javascript">
function ShowWin(){
obj=window.open("", "", "scrollbars='0',dialog='0',minimizable='1',modal='1',width='350',height='350',resizable='0'");
obj.document.write("<html>");
obj.document.write("<img src='сайт/kартинка.gif' />");
obj.document.write("</html>");
this.onfocus=function(){obj.close();}
}
</script>

<a href="#" onclick="ShowWin();return false;"><img src="/knopka.gif" width="20" height="100"></a>
Это будет верным? Если да, то какой вариант предпочтительнее? Или это дело вообще можно сделать проще?
 
Последнее редактирование:
В первом варианте можно много много картинок прописать заранее:
HTML: 
<script type="text/javascript">
function ShowWin(str_img, width, height){
obj=window.open("", "", "scrollbars=0,dialog=0,minimizable=1,modal=1,width="+width+",height="+height+",resizable=0");
obj.document.write("<html>");
obj.document.write("<a href=\"#\" onclick=\"window.close();\"><img src=\""+str_img+"\" /></a>");
obj.document.write('<script')
obj.document.write("</html>");
</script>

<a href="#" onclick="ShowWin('сайт/kартинка1.gif',350,350);return false;"><img src="/knopka.gif" width="20" height="100"></a>
<a href="#" onclick="ShowWin('сайт/kартинка2.gif',350,350);return false;"><img src="/knopka.gif" width="20" height="100"></a>
<a href="#" onclick="ShowWin('сайт/kартинка3.gif',350,350);return false;"><img src="/knopka.gif" width="20" height="100"></a>
<a href="#" onclick="ShowWin('сайт/kартинка4.gif',350,350);return false;"><img src="/knopka.gif" width="20" height="100"></a>
<a href="#" onclick="ShowWin('сайт/kартинка5.gif',350,350);return false;"><img src="/knopka.gif" width="20" height="100"></a>
<a href="#" onclick="ShowWin('сайт/kартинка6.gif',350,350);return false;"><img src="/knopka.gif" width="20" height="100"></a>
<a href="#" onclick="ShowWin('сайт/kартинка7.gif',350,350);return false;"><img src="/knopka.gif" width="20" height="100"></a>
<a href="#" onclick="ShowWin('сайт/kартинка8.gif',350,350);return false;"><img src="/knopka.gif" width="20" height="100"></a>
<a href="#" onclick="ShowWin('сайт/kартинка9.gif',350,350);return false;"><img src="/knopka.gif" width="20" height="100"></a>
......
<a href="#" onclick="ShowWin('сайт/kартинка100500.gif',350,350);return false;"><img src="/knopka.gif" width="20" height="100"></a>

Добавил от себя в первую функцию:
HTML: 
obj.document.write("<a href=\"#\" onclick=\"window.close();\"><img src=\""+str_img+"\" /></a>");
вместо
HTML: 
obj.document.write("<img src=\""+src+"\" />");

Во втором варианте только одна картинка который указали в скрипте <img src='сайт/kартинка.gif' />

Чтобы картинки появлялись без открытия окна надо воспользоваться этим плагином Для просмотра ссылки Войди или Зарегистрируйся
 
Последнее редактирование:
можно и закрыть

$(document).click(function (event) {
if (event.target.id!='s1')
closewin();
});

s1 кнопка, которой окно открывается (иначе оно откроется и закроется)
 
:( Не кидайтесь сильно тапками, но всё равно не работает, блин...

По клику не открывает новую страницу, а переименовывает родительскую страницу с добавлением в конце адреса знака #.
Уже мозги кипят... Вроде же, всё правильно...

Вот тестовая страница с одним скриптом:
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Помогите, плиз, допилить...
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху