У меня есть модал начальной загрузки v3.2.0, который показывает загрузку страницы.Он используется как всплывающее окно подтверждения возраста.
Я ищу способ закрыть этот мод, если условие выполнено.По сути, когда пользователь нажимает кнопку, я хочу, чтобы она закрывалась, но я также хочу, чтобы модал больше не появлялся при загрузке страницы после нажатия этой кнопки.
Вот код
$(window).load(function(){
$('#myModal').modal('show')
});
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button id="footer-close" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Этот код работает для успешной загрузки модального загрузчика при загрузке страницы и закрывает модальный при нажатии на кнопку закрытия, однако модальный по-прежнему будет появляться на страниценагрузки.Поскольку я не очень силен в Javascript, я не уверен, как поступить с условным оператором if или if.Пока у меня есть голые кости:
if (condition) {
$("#myModal").modal('hide');
} else {
// block of code to be executed if the condition is false
}
Внутри оригинала оператор if должен быть, если нажата кнопка закрытия.Это также должно предотвратить автоматическую загрузку модальной модели.Может быть, мне даже не нужно утверждение else.
Возможно, это даже лучший вариант, который я не рассматривал.Любая помощь высоко ценится.
$('#myModal').modal('show')
$('#over18').on('click', function (e) {
$('#myModal').modal('hide')
});
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="https://google.co.uk" class="close" role="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></a>
<img class="img-responsive" style="margin:0 auto;" src="//cdn.shopify.com/s/files/1/0078/4449/5437/files/Flavour_Vapour_Icon_300x300.png?v=1550053751" alt="">
</div>
<div class="modal-body">
<p class="modal-p">You must be at least 18 years old to enter this site.</p>
</div>
<div class="modal-footer">
<button type="button" id="over18" class="btn btn-default">I am 18 or older</button>
<a href="https://google.co.uk" id="under18" class="btn btn-danger" role="button">I am under 18</a>
</div>
</div>
</div>
</div>
Для большей ясности, если я использую следующий код, когда вы нажимаете кнопку, он показывает предупреждение, так что JavaScript и код работает для этого,он просто не будет работать при использовании начальной загрузки: $ ('# myModal'). modal ('hide');
$('#over18').on('click', function () {
alert('Hello!');
});
Таким образом, после некоторой дополнительной игры следующий код автоматически откроет модальное окно, при нажатии кнопки свыше 18 он будет закрыт, и появится предупреждениемодал собирается быть скрытым.Я сделал это, чтобы убедиться, что javascript работает.
Строка, которая вызывает предупреждение, - это то место, куда я должен поместить строку локального хранилища, чтобы модал больше не показывался.Однако это не работает.
$("#myModal").modal("show");
$("#over18").click(function(){
$("#myModal").modal("hide");
});
$("#myModal").on('hide.bs.modal', function(){
alert('The modal is about to be hidden.');
});