Reputation: 5
I have latest materialize css and Jquery. I try to a warning message by using modal when page loading completely. But never working
<div id="myModal" class="modal bottom-sheet">
<div class="modal-content">
<font size="2">Sitemizden en iyi şekilde faydalanabilmeniz için çerezler kullanılmaktadır. Bu siteye giriş yaparak çerez kullanımını kabul etmiş sayılıyorsunuz</font>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat" style="font-size: smaller;margin-top: 0px;height: 30px;">Agree</a>
</div>
And the script is like that,
<script type="text/javascript">
$(document).ready(function(){
$('.modal1').modal('open');
});
</script>
If I use button to open modal, it works. So CSS and JQuery works Have you any idea?
Upvotes: 0
Views: 465
Reputation: 60
This is working well for me
$(document).ready(function() {
$('.modal').modal().show();
$('.modal-close').click(function() {
$('.modal').hide();
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<div id="myModal" class="modal">
<div class="modal-content">
<font size="2">Sitemizden en iyi şekilde faydalanabilmeniz için çerezler kullanılmaktadır. Bu siteye giriş yaparak çerez kullanımını kabul etmiş sayılıyorsunuz</font>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat" style="font-size: smaller;margin-top: 0px;height: 30px;">Agree</a>
</div>
</div>
Upvotes: 1
Reputation: 11
You looks like defined your modal with id selector so i think you should to use modal function like that:
$('#myModal').modal('open');
Upvotes: 1