Используя Bootstrap, сделайте так, чтобы окно предупреждения запоминало действие закрытия

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

Я использую плагин jQuery-Cookie. Я загрузил его на /jquery-cookie-master. Плагин можно найти здесь.

Это то, что я получил до сих пор, следуя коду , найденному здесь .

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="/jquery-cookie-master/jquery.cookie.js"></script>
<script>
    function runOnLoad(){
        if($.cookie('alert-box') == null) {
            $.cookie('alert-box', 'open', { expires: 7 });
        } else if($.cookie('alert-box') == 'close') {
            $(".close").hide();
        }

</script>

HTML:

<body onload="runOnLoad()">

<div class="alert alert-info">
  <button type="button" class="close" data-dismiss="alert" href="hideMe.php" onclick="hideMe()">×</button>
  <p>
    <strong>FORUM UPGRADE:</strong> In light of our recent surge in popularity we upgraded our forum and unfortunately lost all the old threads in the process.
  </p>
  <p>
    In an effort to kick-start the forum again we need your help. Sign up now and leave a post (it's free). Once we reach 100 threads every member will receive a special gift.
  </p>
  <p>
    <a href="http://example.com/forum/#/entry/register">
      <strong>Sign up to the forum now</strong>
    </a>.
  </p>
</div>

</body>

К сожалению, это не работает. Когда я нажимаю кнопку закрытия, оно не запоминает это действие, и если я обновлю страницу, окно предупреждения появится снова.

Что я сделал не так?


person TinyTiger    schedule 15.11.2012    source источник


Ответы (1)


Проблемы с кодом

  • В вашей функции кодов onload вы, кажется, устанавливаете значение файла cookie, что странно, поскольку вы хотите установить файл cookie только тогда, когда пользователь закрыл окно предупреждения.

  • Ваша кнопка имеет атрибут href. Это не обязательно, а также неверный html.

Решение

Чтобы просто скрыть и запомнить состояние окна предупреждения, вы должны привязать событие к кнопке закрытия, чтобы вы знали, когда пользователь нажал кнопку закрытия.

Чтобы связать событие с помощью jQuery, вы можете использовать следующий код:

// When document is ready replaces the need for onload
jQuery(function( $ ){

    // Grab your button (based on your posted html)
    $('.close').click(function( e ){

        // Do not perform default action when button is clicked
        e.preventDefault();

        /* If you just want the cookie for a session don't provide an expires
         Set the path as root, so the cookie will be valid across the whole site */
        $.cookie('alert-box', 'closed', { path: '/' });

    });

});

Чтобы скрыть окно предупреждения, вы должны просто проверить правильное значение файла cookie и скрыть окно:

jQuery(function( $ ){

    // Check if alert has been closed
    if( $.cookie('alert-box') === 'closed' ){

        $('.alert').hide();

    }

    // ... Binding code from above example

});
person hitautodestruct    schedule 04.12.2012
comment
Как я могу применить это несколько предупреждений div? возможно, с $this, но не знаю, как это реализовать. Не могли бы вы добавить скрипку для этого? - person user2513846; 23.04.2016
comment
@user2513846 user2513846 Я бы предложил добавить идентификаторы к каждому уникальному предупреждению div. то есть окно оповещения-1 окно оповещения-2 и т. д. - person hitautodestruct; 24.04.2016
comment
Но как добавить их в код JS? (извините, я не разбираюсь в синтаксисе) - person user2513846; 25.05.2016
comment
@user2513846 user2513846 Я бы посоветовал вам задать еще один вопрос о SO. Объяснение этому слишком сложно для комментария. - person hitautodestruct; 25.05.2016