我可以创建一个不使用 Javascript 的 HTML 弹出窗口吗？或者我可以将 Javascript 放入 <body> 部分吗？答案

【问题标题】：Can I create an HTML pop up that do not use Javascript? or can I put the Javascript into the <body> section?我可以创建一个不使用 Javascript 的 HTML 弹出窗口吗？或者我可以将 Javascript 放入 <body> 部分吗？
【发布时间】：2013-10-12 12:33:40
【问题描述】：

我必须创建一个弹出窗口，当用户单击链接时将显示它。

我认为我不能使用 Javascript，因为我无法访问完整模板，所以我无法将 javascript 放入页面的 <head></head> 部分（我无法修改）

我可以在不使用 Javascript 的情况下创建纯 HTML 弹出窗口，还是可以将我的 Javascript 声明到我的 html 代码的 <body></body> 而不是 <head></head> 部分？

Tnx

安德烈亚

【问题讨论】：

这就是<dialog> 元素的用途，但它几乎不支持浏览器。
@Anthony 据我所知，<dialog> 不是关于“对话框”，而是关于“马和蟾蜍之间的对话”；即a conversation。
那时dialog 是定义列表的不同容器。现在是：“对话框元素代表用户与之交互以执行任务的应用程序的一部分，例如对话框、检查器或窗口。” -- w3.org/TR/html5/interactive-elements.html#the-dialog-element
但我确实提倡马和蟾蜍的对话。

标签： javascript html xhtml

【解决方案1】：

在这里您可以找到演练http://dsheiko.com/weblog/fancy-modal-windows-without-javascript/ 它打开弹出窗口并模糊模态底图。这里看起来如何codepen.io/dsheiko/pen/jCcld

它还描述了如何通过关闭 Esc 键和单击外部模式内容等好东西来增强它，并为 IE8 提供 JavaScript 后备。

【讨论】：

【解决方案2】：

是的，您可以在纯 html 和 css 中执行此操作。诀窍是使用:target 伪选择器。带有:target 的规则将在 url 锚匹配特定 id 时匹配。您可以通过创建普通锚链接来更新 url 锚。这确实有轻微的跳跃效果，因为我们使用的是锚点，但这是可能的。

例如：http://jsfiddle.net/X49zJ/1/

<a href="#modal">Click to Trigger The Modal</a>
<div id="modal"> I am a Hidden Modal</div>

还有 CSS：

#modal {
  display: none;
  width: 300px;
  height: 100px;
  border:1px solid #CCC;
  background:#EEE;
}

#modal:target {
  display: block;
}

有关:target 的更多信息，请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/:target 以及更漂亮的灯箱的demo。

为了获得更大的灵活性，您可以随时添加 javascript。如果您的 javascript 不是必需的，通常最好将 javascript 放在正文的底部，或者添加带有 async 属性的脚本标记，这样它就不会在加载时暂停内容的呈现。

【讨论】：

【解决方案3】：

如果您使用的是 HTML5，则可以在 <a> 标记中使用 target="_blank"，这通常会使链接在现代浏览器的新选项卡中打开。这是很多用户的首选，因此您可能需要考虑这一点。

如果您对 HTML 有完全的控制权，那么将 JavaScript 放入页面的主体应该是非常好的。毕竟，它被放在简单的<script> 标记中——没有必要放在<head> 中。

如果您使用的任何 CMS 过滤掉了 <script> 标记，但您仍然可以控制 HTML 属性，那么您也许可以将 JavaScript 放在 onclick 属性中：

<a href="javascript:void(0);" onclick="window.open(document.URL, '_blank', 'height=200,location=yes,width=350,scrollbars=yes,status=yes');">Link</a>

【讨论】：

【解决方案4】：

如果没有 javascript，您无法做到这一点，但是您可以将脚本标签按字面意思放在页面中的任何位置，它应该可以工作，所以试试这个。

<div>
   <h1 id="test">New Content</h1>
   <script>
      var test = document.getElementById('test');
      test.addEventListener('click', function() {
         alert('clicked');
      });
   </script>
</div>

【讨论】：

【解决方案5】：

您可以使用 HTML 和 CSS 来做到这一点，例如 so。

要回答您的第二个问题，通常也可以将 Javascript 放在页面的 <body> 部分。

【讨论】：

如果没有 javascript，这是不可能的。
@Connor 这根本不是真的；你甚至检查过链接吗？它受到浏览器兼容性的限制，如果您关心 IE6，并且该特定技巧对于触摸设备也有问题，但也有其他方法。
@Pointy 好的，我可以接受那个骇人听闻的解决方案，但是在这个答案提供的链接中没有类似的东西，都是悬停的东西
div 覆盖不是新窗口。更好，但不是 OP 要求的。
@Anthony 也许很好，但完全不清楚 OP 到底想要什么。是的，他说的是“链接”，但我不愿意相信他使用这个词是为了非常具体，因为他对问题空间明显缺乏信心。