完美的弹出窗口-js教程-PHP中文网

完美的弹出窗口

钥匙要点

如果您相信雅各布·尼尔森（Jakob Neilsen）和他的支持者之类的人，没有什么比弹出窗口更邪恶的了。在许多方面，这是正确的。为什么？好吧，我们将尽快列出原因，但是简而言之，这是因为它们几乎总是实施或根本不需要。本教程将表明，有了正确的想法，可以使用弹出窗口而不会让任何人感到不安 - 尤其是浏览您的网站的人。

弹出窗口问题

带有弹出窗口的常见故障是：

>
>
>
>
> ph。这是一个列表……您可能可以将自己的列表添加到此列表中。那么，我们如何解决这些问题？

>在禁用脚本的情况下，弹出窗口无济于事。那样简单。但是，如果您使用了标准，则不会出现这样的问题。因此，而不是使用：

您可以使用：

<a href="#" onclick="window.open('file.htm');">

登录后复制

这样，如果禁用了脚本，则标准链接仍然有效。> 但是，也许有一个很好的理由让您希望窗口在当前窗口的顶部打开。如果是这样，只需添加一个类似的目标属性：

<a href="#" onclick="window.open('file.htm');">

登录后复制

宾果游戏。问题解决了。但是我们可以做更多的事情！

>搜索引擎

>在上面修订的代码后，搜索引擎可以遵循标准的HREF，因此这是我们问题列表中的另一个问题。

>可访问性问题

>弹出窗口的最大故障是，它们将焦点从主浏览器窗口中移开，这可能令人不安。除了可访问性外，他们还提出了一般的可用性问题。您多久看到有人启动弹出窗口，然后无意中单击启动器窗口上，以为没有发生任何事情，请再次单击链接而无需结果？当然，窗口已经打开，但是现在在启动器窗口下方，只向下移动到任务栏，然后从那里选择窗口将解决此问题。

诀窍是通知用户该链接将在新窗口中打开。有多种方法可以解决这个问题：

将说明作为链接本身的一部分。在标题属性中添加一些说明
使用合适的图标表示弹出窗口

打开我的测试页面（在弹出窗口中打开）

打开我的测试页

> 完美的弹出窗口要解决在主窗口上失去关注的问题，您可以使用JavaScript重新设置焦点。本文末尾出现了一个提出的脚本。

网站链接管理工具

如果您习惯于使用Dreamweaver或Content Management System等工具移动页面，则希望保持链接。使用标准HREF，通常是（取决于您使用的工具），但是使用JavaScript，这不太可能。返回我们的代码片刻：

上面的链接几乎可以保持得很好。其中一半将 - HREF部分。但是onclick部分可能会被忽略。这是一个大问题。您可能会认为您的链接已更新，但是实际上，确实启用JavaScript的人会发送到丢失的页面。因此，您可能会发现您的代码将更改为：

<a href="file.htm" onclick="window.open('file.htm');return false;">

登录后复制

>如果您要在启动页面上运行链接验证器，则您的链接确实确实有效。那么，我们如何解决这个问题？像这样：

<a href="file.htm" onclick="window.open('file.htm'); <br>
return false;" target="newWin">

登录后复制

>只有一个链接可以维护，并且正确的HREF将用于窗口。很棒的 - 现在我们到了某个地方！

<a href="file.htm" onclick="window.open('file.htm');  <br>
return false;">

登录后复制

>弹出杀手/mozilla禁用弹出窗口

与禁用JavaScript的问题一样，仅提供标准HREF意味着该链接仍然可以正常工作。现在，我们只需要解决哪个窗口的焦点……

>

完美的弹出脚本

>我们建议使用一个可以放置在一些常见的JavaScript代码中的函数（就像我们对本网站一样），并且可以轻松地从网站中的任何地方调用。这比每次打开窗口都更可取。除了URL外，您可能还需要包括高度和宽度等参数，以及选择哪种类型的弹出样式（取决于您定义的样式）。

这是我推荐的代码：

<a href="#" onclick="window.open('file.htm');">

登录后复制

函数中的附加代码处理焦点方面。如果单击调用此功能的链接，请单击页面上的弹出窗口，以使弹出窗口被隐藏，然后单击另一个弹出链接，代码评估弹出窗口的状态，然后关闭弹出窗口并使用其新维度重新打开它。

调用您将使用以下代码的函数：>

<a href="file.htm" onclick="window.open('file.htm');return false;">

登录后复制

或使用一些实际示例：

>这个是我的弹出链接（控制台模式）

这是我的弹出窗口（固定模式）
这是我的（弹性模式）

注意：“返回false”部分有效地取消了HREF的默认操作，因此它不会打开弹出窗口和普通的HTML窗口 - 它将打开一个或另一个。在没有JavaScript的情况下尝试上述链接，允许您自己查看。

您还能要求什么？好吧……这个蛋糕上有最后一块锦上添花。

关闭弹出窗口

打开弹出窗口后，我们可能会依靠人们使用浏览器/操作系统控件来关闭新打开的窗口。完美的弹出窗口
但是人们并不总是这样做！因此，我们应该在弹出窗口本身中提供链接（或按钮，如果您愿意的话），以允许用户关闭它。但是，我们假设我们的用户已禁用脚本，并且弹出窗口是通过标准HREF路由打开的。您如此周到地提供的“关闭此窗口”链接将促使这样的对话不是很友好：

完美的弹出窗口

要解决此问题，您应该使用JavaScript编写指向网页的关闭链接，并检查是否作为window.open（）方法的一部分打开窗口。这样，如果它是一个真正的弹出窗口，则将出现链接，并且Close（）方法将起作用；如果它不是真正的弹出窗口，则不会出现链接。

这是执行此操作的代码：

<a href="file.htm" onclick="window.open('file.htm'); <br>
return false;" target="newWin">

登录后复制

再次尝试链接，然后亲自查看：

>这个是我的弹出窗口（固定模式）

结论

>希望本教程已经证明弹出链接可以访问，搜索引擎友好且无创。但是，即使您遵循所有这些建议，您仍然应该问自己是否真的需要打开一个新窗口。

>要注意的最后一点是，弹出窗口应该是人们选择使用的东西，因此请勿使用窗口或窗口。这总是让人烦恼……除非他们想购买X10相机或访问“世界上最大的在线赌场”，但不知道，那就是！

以上是完美的弹出窗口的详细内容。更多信息请关注PHP中文网其他相关文章！