How to create modal alert using sweetalert?
<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>