Открытие Bootstrap Alert программно - PullRequest
Новая
       35

Открытие Bootstrap Alert программно

1 голос
/ 17 октября 2019

Я пытаюсь динамически отобразить предупреждение о начальной загрузке https://getbootstrap.com/docs/4.3/components/alerts/, которое отображает сообщение о принятии с использованием файлов cookie, когда пользователь нажимает кнопку ОК, сообщение должно исчезнуть и больше не показываться этому пользователю во время сеанса. ,

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

 <div class="alert fade show cookie-alert" role="alert" data-dismiss="alert">
            <div class="container">
                This website stores cookies. These cookies are used to collect information about how you interact with our website, we use this information to improve and customize your browsing experience. Read our <a target="_blank" href="http://assets.investnow.ng/InvestNow_TC.pdf" style="color:gray;font-weight:bold">terms and conditions</a> to learn more.
                <button type="button" class="btn btn-danger btn-sm pull-right cookie-btn okbtn" data-dismiss="alert" aria-label="Close">OK</button>
            </div>
        </div>

Ответы [ 2 ]

0 голосов
/ 17 октября 2019

Вы можете сохранить в localStorage, если пользователь отклонил предупреждение о cookie-файле.

При загрузке страницы вы бы проверили, задан ли ключ, и отобразили бы предупреждение, если нет: 

if (!localStorage.getItem('cookie-alert-dismissed')) {
    $('#cookie-alert').show()
}

и затем добавьте его, когда пользователь закроет предупреждение: 

$('#cookie-alert button').click(function() {
    $('#cookie-alert').hide()
    localStorage.setItem('cookie-alert-dismissed', 1);
});

Этот ключ будет сохраняться до тех пор, пока пользователь не опустошит свой localStorage или не использует другой браузер.

0 голосов
/ 17 октября 2019

Пожалуйста, найдите код ниже 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</head>
<body>
<div class="alert  alert-dismissible">
    <div class="container">
                This website stores cookies. These cookies are used to collect information about how you interact with our website, we use this information to improve and customize your browsing experience. Read our <a target="_blank" href="http://assets.investnow.ng/InvestNow_TC.pdf" style="color:gray;font-weight:bold">terms and conditions</a> to learn more.
                <button type="button" id="alertClose" class="btn btn-danger btn-sm pull-right cookie-btn okbtn" data-dismiss="alert" aria-label="Close">OK</button>
            </div>


<script>
$(document).ready(function(){
localStorage.setItem("acceptCookies", true);
 $(".alert").hide();
 if (typeof(Storage) !== "undefined") {
  if (localStorage.getItem("acceptCookies")) {
    $(".alert").show();
    $("#alertClose").click(function(){
      localStorage.setItem("acceptCookies", "accepted");
      $(".alert").alert("close");
    });
  }
 } 
});
</script>

</body>
</html>
...