Используя 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 free). Once we reach 100 threads every member will receive a special gift.
  </p>
  <p>
    <a href="#" onclick="location.href='http://example.com/forum/#/entry/register'; return false;">
      <strong>Sign up to the forum now</strong>
    </a>.
  </p>
</div>

</body>

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

Что я сделал неправильно?

Ответы

Ответ 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

});