Renato Lazaro Renato Lazaro - 6 days ago 6
Javascript Question

How to leave my alert with better looking using modal?

I have a JavaScript alert that is working perfectly for what I want it to do by returning an alert by clicking on # menu2, however I want to change the visual part of the alert to work perfectly in the Chrome browser. For this I tried several times the use of jQuery, Bootbox among others. So I've tried a better programming here to make my script more user-friendly.

I've tried using, but to no avail for me.

http://jqueryui.com/dialog/

http://bootboxjs.com/

Among other options of a previous question:

how to change the style of alert box

Here's my html



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<ul id='menu'>
<li id='menu1'><a href='/web/front/helpdesk.public.php' title="Home" class='itemP'>Home</a>
</li>
<li id='menu2'><a href='/web/front/helpdesk.public.php' title="Cria um chamado" class='itemP'>Cria um chamado</a>
</li>
<li id='menu3'><a href='/web/front/ticket.php' title="Chamados" class='itemP'>Chamados</a>
</li>
<li id='menu4'><a href='/web/front/reservationitem.php' title="Reservas" class='itemP'>Reservas</a>
</li>
<li id='menu5'><a href='/web/front/helpdesk.faq.php' title="FAQ" class='itemP'>FAQ</a>
</li>
</ul>







And here's my javascript



"<script type='text/javascript'>
$(document).ready(function(){
$('#menu2').click(function(event){
event.preventDefault();

alert('Text');
})
});
</script>";





My alert on Chrome

enter image description here

What I tried to do to change the visual part of my alert.



"<script type='text/javascript'>
$(document).ready(function () {
$('#menu2').dialog({
e.preventDefault();
});
$('#menu2').click(function () {
});
});
</script>";





I can not program the examples described here in my php code. So I posted part of my code where I have my script working. I ask you to use the code for the solutions described here to improve my understanding.



if (Session::haveRight("ticket", CREATE)) {
$menu['create_ticket']['id']= "menu2";
/*My alert of menu2*/
echo "<script type='text/javascript'>
$(document).ready(function(){
$('#menu2').click(function(event){
event.preventDefault();

alert('Text');
})
});
</script>";
$menu['create_ticket']['default'] = '/front/helpdesk.public.php?create_ticket=1';
$menu['create_ticket']['title'] = __s('Create a ticket');
$menu['create_ticket']['content'] = array(true);
}





Obs: I am issuing the script to a PHP application.

I hope someone can help me ..

I can program the alert for a better look by using the sweetalert. Now I need to call the onClick function for #menu. But I can not move forward.

My new script



echo '<script type="text/javascript">';
echo 'setTimeout(function () { swal("Return the alert test !","Message!","success");';
echo '}, 1000);</script>';





My new alert:

enter image description here

Answer

Use Sweet alert Jquery Plugin for highly customized alert

Comments