Question

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

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

我可以使用Javascript创建一个纯HTML弹出式HTML，或者我可以将我的Javascript声明为我的html代码的<body></body>而不是<head></head>部分吗？

TNX

安德烈

Answer 1

您可以使用HTML和CSS执行此操作，例如so。

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

Answer 2

如果没有javascript，你就无法做到这一点，但是你可以在页面的任何地方放置脚本标签并且它应该有效，所以试试这个。

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

Answer 3

如果您使用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>

Answer 4

是的，您可以在纯HTML和CSS中执行此操作。诀窍是使用:target伪选择器。当网址锚定与特定ID匹配时，:target的规则将匹配。您可以通过创建普通锚链接来更新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属性的脚本标记，这样它就不会在加载时暂停内容呈现。

Answer 5

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

它还描述了如何通过关闭Esc press以及点击外部模态内容并为IE8提供JavaScript后备功能来增强它。

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

5 个答案: