html - 如何在网站打开后显示弹出框

Question

http://jsfiddle.net/f5K6u/2/

大家好。关于如何在站点打开后显示弹出框的任何想法。目前，弹出框只会在单击后打开。这是否有可能在网站加载完成后打开该框。

<span class="box">
<span class="title">Title</span>
<span class="copy">Pellentesque habitant morbi tristique senectus et netus</span>

Answer 1

如果您只是希望弹出窗口出现在页面加载本身(而不是在单击按钮之后)，请制作 <input>通过添加 checked = 'true' 在页面加载时默认选择到标签。

HTML:

<input type="checkbox" id="linkie" class="popUpControl" checked='true'>

注意:上面没有显示动画/过渡效果，因为它没有状态过渡。如果您希望转换也出现在页面加载时，您必须首先离开 input未选中(就像在您现有的代码中一样)，然后在页面加载期间使用 Javascript 将其标记为已选中。

Javascript:

window.onload = function () {
    document.getElementById('linkie').checked = true;
}

Demo without transition | Demo with transition

用于理解的额外信息:

下面是触发您的框出现的 CSS 片段。

.popUpControl:checked ~ label > .box {
    opacity: 1;
    -webkit-transform: scale(1) skew(0deg);
    -moz-transform:    scale(1) skew(0deg);
    -ms-transform:     scale(1) skew(0deg);
    -o-transform:      scale(1) skew(0deg);
}

选择器有效地向浏览器指示当元素带有 class='popUpControl 时( .popUpControl ) 被选中 ( :checked ) 然后是带有 class='box' 的元素并且有标签作为 parent 应该是可见的(使用不透明度)。缩放、倾斜和不透明度一起使它得到显示，而 transition设置在 .box 上使它以动画/过渡的方式变得可见。