如何創建一個疊加層來自動加載頁面加載？

-1

我想弄清楚如何創建一個疊加框，自動加載頁面加載，然後有一個好的按鈕讓用戶點擊使它消失。如何創建一個疊加層來自動加載頁面加載？

東西見覆蓋如何與粉紅色半透明的背景和一個標誌了盒子的中心彈出？但這並不是每次都會出現，我相信每週只有一次。我正在尋找類似的東西，讓我的網站訪問者選擇訂閱。

我一直在嘗試遵循各種教程，但似乎沒有任何工作得很好。我對疊加層或腳本知之甚少，因此對CSS，HTMl和腳本的任何幫助都會非常有幫助！謝謝！

Rebecca

2013-08-30 user2734236

好吧，使用jQuery和jQuery UI及其模態對話框：http://jqueryui.com/dialog/。當然，如果您想每週只顯示一次，則需要存儲該信息（最後顯示）。你可以做到這一點使用cookie，但我會使用localStorage – hereandnow78

要做到這一點，我會使用jQuery。在HTML/CSS中創建疊加層，並將疊加層div放置在標記的開頭。

$(document).ready(function() { 
    // check cookie 
    var visited = $.cookie("visited") 

    // load overlay if they haven't visited 
    if (visited == null) { 
     $('#overlay').fadeIn();  
     $.cookie('visited', 'yes'); 
    } 

    // set cookie 
    $.cookie('visited', 'yes', { expires: 1, path: '/' }); 
}); 

$('button').click(function() { 
    $('#overlay').fadeOut(200, "linear"); 
});

此代碼將加載您的div與ID「覆蓋」，當隱藏按鈕被點擊時，div將淡出。如果你喜歡，你可以通過點擊覆蓋div來淡出div。通過使用這樣的：

$('#overlay').click(function() { 
    $('#overlay').fadeOut(200, "linear"); 
});

這裏有一個小提琴向你展示我的意思： http://jsfiddle.net/andaywells/jWcqZ/17/

來源

2013-08-30 20:50:27

我得到了Uncaught TypeError：undefined不是這行的函數var visited = $ .cookie（「visited」）'有什麼想法？ – yulie

開始加載頁面，但隱藏的覆蓋。

然後在準備好的事件上使用jQ的dom來顯示覆蓋圖。

這是最簡單疊加的，你可以這樣做：http://jsfiddle.net/ninty9notout/6gaND/

$('#overlay').css({'opacity': 0, 'display': "block"}); 
$('#overlay').animate({'opacity': 1}, 1000).on("click", function() { 
    $('#overlay').animate({'opacity': 0}, 1000); 
});

享受！

來源

2013-08-30 20:54:28 ninty9notout

在小提琴中，將'＃overlay'的位置屬性從'position：absolute'更改爲'position：fixed'以覆蓋整個頁面。 :) – timgavin

如何創建一個疊加層來自動加載頁面加載？

回答

相關問題