title: How to create modal alert using sweetalert?
body: <p>I am a beginner in Javascript and I need to generate an alert for the user when clicking on menu2 on my page to return a message, for this I opted to use a modal plugin compatible with all browsers<a href="http://t4t5.github.io/sweetalert/" rel="nofollow noreferrer">Plugin modal</a> The code below was all I could get Until now, but without success.
  Here's my html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;ul id='menu'&gt;
    &lt;li id='menu1'&gt;&lt;a href='/web/front/helpdesk.public.php' title="Home" class='itemP'&gt;Home&lt;/a&gt;
    &lt;/li&gt;
    &lt;li id='menu2'&gt;&lt;a href='/web/front/helpdesk.public.php' title="Cria um chamado" class='itemP'&gt;Cria um chamado&lt;/a&gt;
    &lt;/li&gt;
    &lt;li id='menu3'&gt;&lt;a href='/web/front/ticket.php' title="Chamados" class='itemP'&gt;Chamados&lt;/a&gt;
    &lt;/li&gt;
    &lt;li id='menu4'&gt;&lt;a href='/web/front/reservationitem.php' title="Reservas" class='itemP'&gt;Reservas&lt;/a&gt;
    &lt;/li&gt;
    &lt;li id='menu5'&gt;&lt;a href='/web/front/helpdesk.faq.php' title="FAQ" class='itemP'&gt;FAQ&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here's my javascript</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>echo '&lt;script type="text/javascript"&gt;';
    echo'setTimeout(function () {
    swal
    ("Return the alert test !",
    "Message!",
    "success");';
    echo '}, 1000);
    &lt;/script&gt;';</code></pre>
  </div>
  </div>
  </p>
  
  
  
  <p>Return of the alert working on the page.</p>
  
  <p><a href="https://i.stack.imgur.com/AGMTV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AGMTV.png" alt="enter image description here"></a></p>
  
  <p>I've tried it this way, but unsuccessfully so far.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>     echo '&lt;script type="text/javascript"&gt;';
    echo'setTimeout(function () {
    echo '$(document).ready(function() {
    echo '$('#menu2').click(function(event) { 
    swal
    ("Return the alert test !",
    "Message!",
    "success");';
    echo '}, 1000);
    &lt;/script&gt;';</code></pre>
  </div>
  </div>
  </p>
  
  <p>Error while trying to run the solution in my php.</p>
  
  <p><a href="https://i.stack.imgur.com/H160h.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H160h.png" alt="enter image description here"></a></p>
  
  <p>I do not want the method to be called, the default action of the event will not fire. To do this use event.preventDefault (); But it's not working for me. The alert does not appear. Does anyone have a solution?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>echo '&lt;script type="text/javascript"&gt;';
  echo '$(document).ready(function(){';
  echo '    $("#menu2").click(function(event){'; 
  echo '            event.preventDefault()';        
  echo '        swal("Return the alert test !", "Message!", "success")';
  echo '    })';
  echo '});';
  echo '&lt;/script&gt;';</code></pre>
  </div>
  </div>
  </p>