Question

你好。有关如何在网站打开后显示弹出框的任何想法。目前弹出框只会在点击后打开。一旦网站加载完毕，这个盒子就可以打开了。

<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'的元素并将其标记为应使父级可见（使用不透明度）。缩放，倾斜和不透明度一起显示，而transition上的.box设置使其以动画/过渡方式显示。

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

1 个答案: