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

Тема в разделе "JavaScript", создана пользователем mychatik, 11 мар 2015.

Модераторы: ZiX
  1. mychatik

    mychatik Создатель

    Регистр.:
    28 авг 2011
    Сообщения:
    34
    Симпатии:
    15
    Встала задача - по клику на кнопку, открыть в новом окне картинку.
    Далее, по клику по родительскому окну, либо по дочернему (а лучше оба варианта) это окно с картинкой должно закрыться.
    Я так понимаю, что без 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 нравится это.
  2. rebux

    rebux Создатель

    Регистр.:
    3 ноя 2011
    Сообщения:
    10
    Симпатии:
    4
    Очень просто...

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

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

    Андрей Шпак Создатель

    Регистр.:
    11 фев 2013
    Сообщения:
    43
    Симпатии:
    7
    не пойдет такое?

    <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()">
     
  4. Андрей Шпак

    Андрей Шпак Создатель

    Регистр.:
    11 фев 2013
    Сообщения:
    43
    Симпатии:
    7
    Только вопрос - а точно надо картинку в новом окне открывать? для этого можно в рамках одной страницы использовать дивы( jquery ui - popup - готовое решение со всеми плюшками), и показывать в виде попапа. гораздо кошернее во всех смыслах.
    Это я про то, что наплодив новые окна браузера-имеем ряд проблем, начиная от ресурсоёмкости и заканчивая юзабилити.
     
  5. mychatik

    mychatik Создатель

    Регистр.:
    28 авг 2011
    Сообщения:
    34
    Симпатии:
    15
    Всё это немного не то...
    То, что предлагает rebux, это обычная ссылка через скрипт. Это я делал. Да, откроет мне окно заданных размеров, но а закрыть?
    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>
    Это будет верным? Если да, то какой вариант предпочтительнее? Или это дело вообще можно сделать проще?
     
    Последнее редактирование: 15 мар 2015
  6. rebux

    rebux Создатель

    Регистр.:
    3 ноя 2011
    Сообщения:
    10
    Симпатии:
    4
    В первом варианте можно много много картинок прописать заранее:
    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' />

    Чтобы картинки появлялись без открытия окна надо воспользоваться этим плагином http://plugins.jquery.com/magnific-popup/
     
    Последнее редактирование: 14 мар 2015
    mychatik нравится это.
  7. Андрей Шпак

    Андрей Шпак Создатель

    Регистр.:
    11 фев 2013
    Сообщения:
    43
    Симпатии:
    7
    можно и закрыть

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

    s1 кнопка, которой окно открывается (иначе оно откроется и закроется)
     
  8. mychatik

    mychatik Создатель

    Регистр.:
    28 авг 2011
    Сообщения:
    34
    Симпатии:
    15
    :( Не кидайтесь сильно тапками, но всё равно не работает, блин...

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

    Вот тестовая страница с одним скриптом:

    Помогите, плиз, допилить...