FancyBox - кнопка «Больше не показывать это сообщение»?

У меня есть FancyBox на веб-сайте, который всплывает при посещении и содержит некоторую информацию. Я хотел бы добавить какую-то кнопку, которую пользователь может нажать, и она устанавливает файл cookie, чтобы не показывать сообщение в течение месяца или около того.

Я совершенно бесполезен, когда дело доходит до таких вещей, поэтому, если бы кто-нибудь мог объяснить мне, что делать, это было бы здорово.

Вот что у меня есть до сих пор. Внизу я добавил то, что, по моему мнению, может быть якорем для предлагаемого файла cookie («noShow»), но я не уверен, что это будет работать так, как есть. Я загрузил все сценарии jQuery до этого для FancyBox, а после этого он также загружает jquery.cookie.js. Если это имеет значение, я использую любую последнюю загрузку для FancyBox 2.

<script type="text/javascript"> 
function openFancy() { 
setTimeout( function() {$('#autoStart').trigger('click'); },1000);
} 

$(document).ready(function() {
    openFancy();
    $('#autoStart').fancybox();
});
</script>

<!-- This is the popup itself -->
<a id="autoStart" style="display:none" href="#autoFancybox"></a>
 <div style="display: none;">
  <div id="autoFancybox" style="width: 800px">
   <div>
    <!-- My content for the Fancybox is here -->
    <br />
    <p style="font-size:10px" align="right">
    <a id="noShow" href="#noShow">Don't me show this message again</a>
    </p>
   </div>
  </div>
 </div>

Спасибо, Лиам.


javascript html jquery fancybox fancybox-2
person Liam    schedule 12.12.2012    source источник
comment
возможный дубликат Задержка всплывающего окна на 10 секунд, только всплывает один раз   -  person JFK    schedule 12.12.2012

Ответы (2)


arrow_upward
6
arrow_downward

Помимо вашей функции, которая запускает fancybox, создайте другую, которая устанавливает значение файла cookie и время истечения срока действия при нажатии кнопки:

function dontShow(){
 $.fancybox.close(); // optional
 $.cookie('visited', 'yes', { expires: 30 }); // set value='yes' and expiration in 30 days
}

... затем проверьте файл cookie и решите, запускать ли fancybor или нет:

$(document).ready(function() {
    var visited = $.cookie('visited'); // create cookie 'visited' with no value
    if (visited == 'yes') {
        return false;
    } else {
        openFancy(); // cookie has no value so launch fancybox on page load
    }
  $('#autoStart').fancybox(); // bind fancybox to selector
}); // ready

... теперь html вашей кнопки

<a id="noShow" href="javascript:dontShow()">Don't show this message again</a>

См. рабочую DEMO.

person JFK    schedule 17.12.2012
comment
Обратите внимание, что для $.cookie требуется плагин jQuery, упомянутый @Ma9ic, это не нативная функция. - person pkExec; 20.08.2014
comment
@pkExec: вы правы. ОП упомянул, что они загружают скрипт jquery.cookie.js до ответа Ma9nic. Я предположил, что было понятно, что нам нужен плагин jQuery для работы этого ответа (предлагаемая демонстрация фактически также загружает плагин cookie jQuery) - person JFK; 20.08.2014
comment
действительно, я полностью пропустил их. Добавлено форматирование для будущих зрителей. - person pkExec; 20.08.2014

arrow_upward
0
arrow_downward

Существует отличный плагин jQuery для управления файлами cookie, который вы должны проверить — https://github.com/carhartl/jquery-cookie

Когда пользователь попадает на ваш сайт, вы можете проверить файл cookie, чтобы узнать, был ли он там раньше. Если они еще не отобразили вашу анимацию и установили файл cookie. Если да, то не запускайте анимацию.

Взглянув на документы jquery-cookie, вы можете установить файл cookie на 7 дней, например: $.cookie('visited', 'yes', {expires: 7}); Таким образом, ваш код может выглядеть так:

// Make sure DOM has fully loaded before running code
$(function(){
    if( ! $.cookie('visited')){
        // Your code here
    } else {
        $.cookie('visited', 'yes', { expires: 7 });
    }
});
person Ma9ic    schedule 12.12.2012
comment
Привет, спасибо за ваш ответ. Я совсем нуби в таких вещах. Не могли бы вы показать мне, как это будет работать для кнопки «Больше не показывать это сообщение», которую я хочу сделать, используя код, который я показал? Извините за любые неприятности. Спасибо, Лиам. - person Liam; 12.12.2012