2

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

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

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

肿瘤坏死因子

安德烈亚

4

5 回答 5

1

是的，您可以在纯 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;
}

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

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

于 2013-10-05T16:15:04.177 回答
0

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

如果您对 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>
于 2013-10-05T15:39:32.447 回答
0

您可以使用 HTML 和 CSS 来做到这一点，就像这样。

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

于 2013-10-05T15:30:42.217 回答
0

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

<div>
   <h1 id="test">New Content</h1>
   <script>
      var test = document.getElementById('test');
      test.addEventListener('click', function() {
         alert('clicked');
      });
   </script>
</div>
于 2013-10-05T15:31:19.173 回答
-1

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

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

于 2014-08-20T16:45:53.457 回答