当前位置：文江博客话题详情

如何制作一个弹出窗口，允许用户单击链接、关闭窗口并在第一个窗口中打开链接？

发布于 2024-12-03 07:50:34 字数 147 浏览 1 评论 0原文

这几乎就是我想做的......

所以，用户正在浏览我的网站，他们单击“按类别查看”链接，该链接会打开一个弹出窗口，其中包含一系列图片，该链接指向我网站的不同部分。当用户单击其中之一时，我希望能够关闭弹出窗口并在原始窗口中打开链接。

有人可以帮忙吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

执着的年纪 2024-12-10 07:50:34

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>

function openClosePopup (el) {
    window.opener.location.href = el.href;
    window.close();
    return true;
}

So your HTML is

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

For opening a popup you may use the same trick:

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

And your HTML:

<a href="#some_url" onclick="return !openPopup(this)">Open windows</a>

回复收藏 0 原文

伤感在游骋 2024-12-10 07:50:34

由于弹出窗口拦截器，我不建议使用弹出窗口进行导航。使用一些文档内解决方案：

您可以使用 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>

当然，您需要包含jQUery和jquery.fancybox JS脚本。

和额外的CSS代码：

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

编辑2

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

我的错误是fancybox内容默认不能隐藏，只能隐藏在容器中。经过这些更改后 fancybox 就可以工作了。

编辑3

尝试将JS代码更改为以下代码：

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

该脚本将在加载图像后执行。

I wouldn't recommend using pop-up for navigation because of pop-up blockers. Use some in-document solutions:

You can use Fancybox jQuery plugin for this: http://fancybox.net/

It has cool functionality to insert a bunch of HTML into its popup-style window.

After clicking a link in your fancybox window the document will reload.

EDIT:

<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>

and JS code:

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

You need to include jQUery and jquery.fancybox JS scripts of course.

and additional CSS code:

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

EDIT 2

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

My mistake was that fancybox content can't be hidden by default but only in a container. After these changes fancybox will work.

EDIT 3

Try to change JS code to this one:

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

The script will execute after loading images.

回复收藏 0 原文

~没有更多了~

关于作者

巷子口的你

暂无简介

0 文章

0 评论

23 人气

关注发私信

胡图图

文章 0 评论 0

关注

zt006

文章 0 评论 0

关注

z祗昰~

文章 0 评论 0

关注

冰葑

文章 0 评论 0

关注

野の

文章 0 评论 0

关注

天空

文章 0 评论 0

友情链接

文江博客

如何制作一个弹出窗口，允许用户单击链接、关闭窗口并在第一个窗口中打开链接？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

如何制作一个弹出窗口，允许用户单击链接、关闭窗口并在第一个窗口中打开链接？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。