Modal Jquery/ Materialize not working in index.php

Question

Hello!

I am developing a modal of acceptance for cookie terms. I was able to solve cache storage through php. However, I could not see why the modal does not appear in the layout when the user does not have the cached site.

I’m using Materialize to create the modal.

Html Code:

<div id="modalPropaganda" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>Com o objetivo de fornecer um serviço mais personalizado e ágil, armazenamos informações sobre como você usa este site. Esse processo é realizado por meio de pequenos arquivos de textos chamados cookies. Eles contêm pequenas quantidades de informação e são baixados para o seu computador ou outro dispositivo por um servidor deste site. O seu navegador, em seguida, envia esses cookies de volta a cada nova visita. Desta forma, podemos reconhecer e lembrar de suas preferências. Você pode encontrar informações mais detalhadas sobre cookies e como funcionam <a href="/termo-de-cookie/">em nossa página.</a></p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Confirmar e Fechar</a>
</div>
</div>

Php code for cookie declaration and expiration:

<?php

$cookieExistente = (isset($_COOKIE['modal']));

if(!$cookieExistente){
setcookie('modal', 'ok', strtotime('+7 days'));
}

?>

Php and jquery code for if the user does not already have the cache, display the modal for it:

<?php if(!$cookieExistente) : ?>

    <script>
    $(document).ready(function(){
    $("#modalCookie").modal('show');
    });
    </script>

    <?php endif; ?>

NOTE: I don’t have css yet.
I used Materialize’s "Compiled and minified Javascript" to pull the Javascript library.

Answer 1

Use:

$('#modalCookie').modal().modal('open');

First you start the plugin and then trigger the method open that opens the modal.

Watch out for the id modal. In jQuery you are using a id other than modal.

Behold:

$(document).ready(function(){
   $('#modalCookie').modal().modal('open'); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>


<div id="modalCookie" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>Com o objetivo de fornecer um serviço mais personalizado e ágil, armazenamos informações sobre como você usa este site. Esse processo é realizado por meio de pequenos arquivos de textos chamados cookies. Eles contêm pequenas quantidades de informação e são baixados para o seu computador ou outro dispositivo por um servidor deste site. O seu navegador, em seguida, envia esses cookies de volta a cada nova visita. Desta forma, podemos reconhecer e lembrar de suas preferências. Você pode encontrar informações mais detalhadas sobre cookies e como funcionam <a href="/termo-de-cookie/">em nossa página.</a></p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Confirmar e Fechar</a>
</div>
</div>