Как сделать всплывающее окно, которое позволяет пользователю щелкнуть ссылку, закрыть окно и открыть ссылку в первом окне? - PullRequest
Новая
       10

Как сделать всплывающее окно, которое позволяет пользователю щелкнуть ссылку, закрыть окно и открыть ссылку в первом окне?

0 голосов
/ 08 сентября 2011

Это почти то, что я хочу сделать ....

Итак, пользователь просматривает мой сайт и нажимает ссылку "Просмотр по категориям", эта ссылка открывает всплывающее окнос серией фотографий, которые ссылаются на разные части моего сайта.Когда пользователь нажимает одну из них, я хочу иметь возможность закрыть всплывающее окно и открыть ссылку в исходном окне.

Может кто-нибудь помочь?

Ответы [ 2 ]

1 голос
/ 08 сентября 2011 
function openClosePopup (el) {
    window.opener.location.href = el.href;
    window.close();
    return true;
}

Итак, ваш HTML 

<a href="#some_url" onclick="return !openClosePopup(this)">Click me</a>

Для открытия всплывающего окна вы можете использовать тот же трюк: 

function openPopup (el) {
    window.open(el.href,'name','height=400,width=200');
    return true;
}

И ваш HTML: 

<a href="#some_url" onclick="return !openPopup(this)">Open windows</a>
0 голосов
/ 08 сентября 2011

I не рекомендовал бы с использованием всплывающих окон для навигации из-за блокировщиков всплывающих окон.Используйте некоторые решения в документе:

Для этого вы можете использовать плагин Fancybox jQuery: http://fancybox.net/

Он имеет классную функциональность для вставки связки HTML в окно всплывающего стиля.

После нажатия на ссылку в окне fancybox документ перезагрузится.

РЕДАКТИРОВАТЬ: 

<a id="categories-trigger" href="#categories">View by categories</a>
<div class="hidden-categories">
  <div id="categories"> 
    <!-- Your code from the link you provided. Only from inside <body> tag -->
  </div> 
</div>

и код JS: 

<script type="text/javascript">
    $(function(){
      $("#categories-trigger").fancybox({ /* fancybox parameters here */ });
    });
</script>

Разумеется, вам необходимо включить JS-скрипты jQUery и jquery.fancybox.

и дополнительный код CSS: 

.hidden-categories #categories{
  display:none;
}

EDIT 2 

#categories{
  overflow: auto;
  width: 820px;
  height: 820px;
}

Моя ошибка заключалась в том, что содержимое fancybox не может быть скрыто по умолчанию, но только в контейнере.После этих изменений будет работать fancybox.

РЕДАКТИРОВАТЬ 3

Попробуйте изменить код JS на этот: 

$(window).load(function(){
  $("#categories-trigger").fancybox({ /* fancybox parameters here */ });
});

Сценарий будет выполнен послезагрузка изображений.

...