从没有javascript的对象创建弹出窗口

时间：2016-07-04 21:49:55

标签： javascript html css popup

感谢您的帮助。我是CSS，HTML和javascript的新手。我们可以说我只是一个热心的博主。

我想创建一个不使用任何javascript的弹出窗口，仅来自html和css元素。这对我来说是棘手的部分。我的页面的小部件部分中有一个广告脚本。我想在页面加载后将该广告脚本弹出到屏幕中间5000ms。没有javascript。

第二件事情真棒，如果这个弹出窗口只会显示给来自我其他网站的人。所以有点我需要确定流量来源的引用者。

我没有找到任何带有自动弹出窗口的css + html代码和我发现的http引用代码也没有用。

所以任何人都可以帮助一个绝望的新手女孩在她的大挑战中？ :( 我知道这是一个复杂的要求，任何部分的灵魂都会被批评。请尽可能详细。谢谢大家

4 个答案:

答案 0 :(得分：1)

<强> SOLUTION：

您可以在第一个问题中使用CSS动画来触发纯CSS模态/弹出窗口。

对于您的第二个问题我有一个想法未经过测试，您可以使用指向您网站的链接，然后使用/＃popup来自其他网站的人。例如。 http://www.example.com/#popup。

这将触发:target伪类，因为url的哈希值与我们元素的id相同，因此它会将淡入式动画应用于弹出窗口，使目标受众可以看到它

您将在下面找到两个代码段，一个完全满足您的第一个要求，甚至还有一个关闭它的按钮，他们还能继续享受您的网站吗？

第二个代码片段是我能用纯CSS + HTML思考的解决方案，它应该满足您的要求，您可以尝试使用真实的URL进行测试。

CODE SNIPPET （等待5秒）。

＆＃13;
＆＃13; 
body {
  background-color: white;
}
#popup {
  position: fixed;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  width: 300px;
  height: 150px;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -100%);
  background-color: royalblue;
  visibility: hidden;
  opacity: 0;
  z-index: -1;
  padding: 40px;
  font-size: 3em;
  color: white;
  animation: mymodal 1s 5s forwards;
}
.close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: white;
}
.close:hover {
  color: black;
}
#popup-container:target {
  display: none;
}
@keyframes mymodal {
  to {
    top: 50%;
    transform: translate(-50%, -50%);
    visibility: visible;
    opacity: 1;
    z-index: 1050;
  }
}
＆＃13; 
<div id="popup-container">
  <div id="popup">
    <a class="close" href="#popup-container">×</a> I'm a popup.
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

CODE SNIPPET Not TESTED （无法重现其想要做的事情，需要一个网址）。

＆＃13;
＆＃13; 
body {
  background-color: white;
}
#popup {
  position: fixed;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  width: 300px;
  height: 150px;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -100%);
  background-color: royalblue;
  visibility: hidden;
  opacity: 0;
  z-index: -1;
  padding: 40px;
  font-size: 3em;
  color: white;
}
#popup:target {
  animation: mymodal 1s 5s forwards;
}
.close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: white;
}
.close:hover {
  color: black;
}
#popup-container:target {
  display: none;
}
@keyframes mymodal {
  to {
    top: 50%;
    transform: translate(-50%, -50%);
    visibility: visible;
    opacity: 1;
    z-index: 1050;
  }
}
＆＃13; 
<div id="popup-container">
  <div id="popup">
    <a class="close" href="#popup-container">×</a> I'm a popup.
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

修改

  

我需要添加到此CSS代码以禁止访问者在弹出窗口外滚动页面？此外，我不希望他们能够点击框外的任何地方点击。

您需要将:target伪类更改为目标body，以便您可以使用应用overflow: hidden;的动画，这将阻止用户在弹出窗口时滚动打开。然后，当点击弹出窗口的关闭按钮时，您将动画集移除到body并应用overflow: scroll;（不支持URL方法）。

CODE SNIPPET （等待5秒）

＆＃13;
＆＃13; 
body {
  margin: 0;
  background-color: white;
}
#ref-fb {
  animation: bodynoscroll 1s 4.6s forwards;
}
#popup-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: -2;
  opacity: 0;
  visibility: hidden;
  animation: mymodalcontainer 1s 5s forwards;
}
#popup {
  position: fixed;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  width: 300px;
  height: 150px;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -100%);
  background-color: royalblue;
  visibility: hidden;
  opacity: 0;
  z-index: -1;
  padding: 40px;
  font-size: 3em;
  color: white;
  animation: mymodal 1s 5s forwards;
}
.close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: white;
}
.close:hover {
  color: black;
}
#ref-fb:target #popup-container {
  display: none;
}
#ref-fb:target {
  overflow: scroll;
  animation: none;
}
@keyframes mymodal {
  to {
    top: 50%;
    transform: translate(-50%, -50%);
    visibility: visible;
    opacity: 1;
    z-index: 1050;
  }
}
@keyframes mymodalcontainer {
  to {
    visibility: visible;
    opacity: 1;
    z-index: 1040;
  }
}
@keyframes bodynoscroll {
  to {
    overflow: hidden;
  }
}
＆＃13; 
<body id="ref-fb">
  <div class="main">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor enim non arcu congue lobortis. Integer sed ipsum id elit porttitor auctor. Aenean tincidunt lorem ut nisl dapibus, non vulputate nisi faucibus. Donec justo diam, dictum sit amet
      eleifend eu, consectetur et eros. Nam ut tempus tellus. Praesent tincidunt tortor nunc, non iaculis orci pretium non. Sed id massa in odio egestas faucibus eget sed libero. Aenean quis faucibus eros, non convallis erat. Vestibulum accumsan, est
      eget viverra vehicula, tellus nulla aliquet ex, a tempus mi lectus et lacus. Phasellus sollicitudin orci eu lectus pellentesque, mattis commodo purus fermentum. Aliquam in dui sit amet elit maximus euismod.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor enim non arcu congue lobortis. Integer sed ipsum id elit porttitor auctor. Aenean tincidunt lorem ut nisl dapibus, non vulputate nisi faucibus. Donec justo diam, dictum sit amet
      eleifend eu, consectetur et eros. Nam ut tempus tellus. Praesent tincidunt tortor nunc, non iaculis orci pretium non. Sed id massa in odio egestas faucibus eget sed libero. Aenean quis faucibus eros, non convallis erat. Vestibulum accumsan, est
      eget viverra vehicula, tellus nulla aliquet ex, a tempus mi lectus et lacus. Phasellus sollicitudin orci eu lectus pellentesque, mattis commodo purus fermentum. Aliquam in dui sit amet elit maximus euismod.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor enim non arcu congue lobortis. Integer sed ipsum id elit porttitor auctor. Aenean tincidunt lorem ut nisl dapibus, non vulputate nisi faucibus. Donec justo diam, dictum sit amet
      eleifend eu, consectetur et eros. Nam ut tempus tellus. Praesent tincidunt tortor nunc, non iaculis orci pretium non. Sed id massa in odio egestas faucibus eget sed libero. Aenean quis faucibus eros, non convallis erat. Vestibulum accumsan, est
      eget viverra vehicula, tellus nulla aliquet ex, a tempus mi lectus et lacus. Phasellus sollicitudin orci eu lectus pellentesque, mattis commodo purus fermentum. Aliquam in dui sit amet elit maximus euismod.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor enim non arcu congue lobortis. Integer sed ipsum id elit porttitor auctor. Aenean tincidunt lorem ut nisl dapibus, non vulputate nisi faucibus. Donec justo diam, dictum sit amet
      eleifend eu, consectetur et eros. Nam ut tempus tellus. Praesent tincidunt tortor nunc, non iaculis orci pretium non. Sed id massa in odio egestas faucibus eget sed libero. Aenean quis faucibus eros, non convallis erat. Vestibulum accumsan, est
      eget viverra vehicula, tellus nulla aliquet ex, a tempus mi lectus et lacus. Phasellus sollicitudin orci eu lectus pellentesque, mattis commodo purus fermentum. Aliquam in dui sit amet elit maximus euismod.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor enim non arcu congue lobortis. Integer sed ipsum id elit porttitor auctor. Aenean tincidunt lorem ut nisl dapibus, non vulputate nisi faucibus. Donec justo diam, dictum sit amet
      eleifend eu, consectetur et eros. Nam ut tempus tellus. Praesent tincidunt tortor nunc, non iaculis orci pretium non. Sed id massa in odio egestas faucibus eget sed libero. Aenean quis faucibus eros, non convallis erat. Vestibulum accumsan, est
      eget viverra vehicula, tellus nulla aliquet ex, a tempus mi lectus et lacus. Phasellus sollicitudin orci eu lectus pellentesque, mattis commodo purus fermentum. Aliquam in dui sit amet elit maximus euismod.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor enim non arcu congue lobortis. Integer sed ipsum id elit porttitor auctor. Aenean tincidunt lorem ut nisl dapibus, non vulputate nisi faucibus. Donec justo diam, dictum sit amet
      eleifend eu, consectetur et eros. Nam ut tempus tellus. Praesent tincidunt tortor nunc, non iaculis orci pretium non. Sed id massa in odio egestas faucibus eget sed libero. Aenean quis faucibus eros, non convallis erat. Vestibulum accumsan, est
      eget viverra vehicula, tellus nulla aliquet ex, a tempus mi lectus et lacus. Phasellus sollicitudin orci eu lectus pellentesque, mattis commodo purus fermentum. Aliquam in dui sit amet elit maximus euismod.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor enim non arcu congue lobortis. Integer sed ipsum id elit porttitor auctor. Aenean tincidunt lorem ut nisl dapibus, non vulputate nisi faucibus. Donec justo diam, dictum sit amet
      eleifend eu, consectetur et eros. Nam ut tempus tellus. Praesent tincidunt tortor nunc, non iaculis orci pretium non. Sed id massa in odio egestas faucibus eget sed libero. Aenean quis faucibus eros, non convallis erat. Vestibulum accumsan, est
      eget viverra vehicula, tellus nulla aliquet ex, a tempus mi lectus et lacus. Phasellus sollicitudin orci eu lectus pellentesque, mattis commodo purus fermentum. Aliquam in dui sit amet elit maximus euismod.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor enim non arcu congue lobortis. Integer sed ipsum id elit porttitor auctor. Aenean tincidunt lorem ut nisl dapibus, non vulputate nisi faucibus. Donec justo diam, dictum sit amet
      eleifend eu, consectetur et eros. Nam ut tempus tellus. Praesent tincidunt tortor nunc, non iaculis orci pretium non. Sed id massa in odio egestas faucibus eget sed libero. Aenean quis faucibus eros, non convallis erat. Vestibulum accumsan, est
      eget viverra vehicula, tellus nulla aliquet ex, a tempus mi lectus et lacus. Phasellus sollicitudin orci eu lectus pellentesque, mattis commodo purus fermentum. Aliquam in dui sit amet elit maximus euismod.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor enim non arcu congue lobortis. Integer sed ipsum id elit porttitor auctor. Aenean tincidunt lorem ut nisl dapibus, non vulputate nisi faucibus. Donec justo diam, dictum sit amet
      eleifend eu, consectetur et eros. Nam ut tempus tellus. Praesent tincidunt tortor nunc, non iaculis orci pretium non. Sed id massa in odio egestas faucibus eget sed libero. Aenean quis faucibus eros, non convallis erat. Vestibulum accumsan, est
      eget viverra vehicula, tellus nulla aliquet ex, a tempus mi lectus et lacus. Phasellus sollicitudin orci eu lectus pellentesque, mattis commodo purus fermentum. Aliquam in dui sit amet elit maximus euismod.
    </p>
  </div>
  <div id="popup-container">
    <div id="popup">
      <a class="close" href="#ref-fb">×</a> I'm a popup.
    </div>
  </div>
</body>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

  1. 您可以使用5秒延迟的动画。

    2. body {
  margin: 0;
}
.popup {
  width: 300px;
  height: 300px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #bada55;
  opacity: 0;
  z-index: 99999;
  animation: opacity 1s forwards;
  animation-delay: 5000ms;
}
@keyframes opacity {
  0 {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
    <div class="popup"></div>

    1. 仅使用HTML和CSS无法实现。

答案 2 :(得分：0)

对于第一部分，您可以使用CSS关键帧：

HTML：

#popup {
  opacity:0;
  animation: animationFrames linear 5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes animationFrames{
  99.9999% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

CSS：

.First()

对于第二部分，我不认为技术上可以通过一些Javascript来获取引用者，因为CSS和HTML是表现性的。

答案 3 :(得分：0)

谢谢你的答案:)第一部分绝对解决了。

对于第二部分，我可以使用我喜欢的任何方式来确定访问者的来源，我没有正确地写对不起。让我解释一下我的情况。

我不想在弹出窗口中使用javascript，因为广告提供商不允许将广告放入弹出窗口。但没有弹出广告，广告完全无用，没有人注意到它。所以我尽量避免使用javascript弹出窗口，因为我假设如果机器人扫描我的网站，它会注意到广告脚本是由javascript触发的。我认为使用css更安全。

当一个人检查我的页面时，我也不希望他注意到该广告是在弹出窗口中。所以我想，我想只为来自我的其他网站的访问者或来自facebook的访问者显示弹出窗口。 在这种情况下，如果有人直接检查我的页面或通过搜索引擎，则没有弹出窗口。

我想知道如何为那些来自facebook或来自我的其他网站的人提供不同的CSS。在这种情况下，对于检查员来说，绝对没有poup的痕迹，因为他只会看到原始的CSS。：）

由于

相关问题
最新问题