如何使網站打開後彈出框顯示

http://jsfiddle.net/f5K6u/2/如何使網站打開後彈出框顯示

嗨，大家好。關於如何在網站打開後出現彈出框的任何想法。目前只有一次點擊後纔會打開彈出框。一旦網站完成加載，這可能會打開盒子。

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

來源

2014-07-25 user3804724

將'checked ='true''添加到''元素。彈出窗口基於此打開，如[here]（http://jsfiddle.net/f5K6u/3/）。 – Harry

檢查是否存在cookie，如果它不存在打開彈出窗口，然後從windows.onload（）{}函數中設置cookie – RamRaider

在頁面加載中使用checked ='true'時不會觸發動畫？我的意思是，如果它對初始負載不那麼重要，那麼NBD。 – TheHamstring

如果您只是想彈出出現在頁面加載本身（而不是點擊該按鈕後），加入checked = 'true'到標籤使<input>中的默認頁面加載自己選擇。

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'並具有標籤作爲父應當可見（使用不透明度）的瀏覽器。比例尺，傾斜度和不透明度一起使其顯示，而在.box上設置的transition使其以動畫/過渡方式變爲可見。

來源

2014-07-25 10:58:30 Harry

如何使網站打開後彈出框顯示

回答

相關問題