gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 13:07:52 25 4
gpt4 key购买 nike

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

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

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

最佳答案

如果您只是希望弹出窗口出现在页面加载本身(而不是在单击按钮之后),请制作 <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 上使它以动画/过渡的方式变得可见。

关于html - 如何在网站打开后显示弹出框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24953466/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com