How to leave my alert with better looking using modal?

Question

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

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:

Answer 1

You need to get a basic understanding of how javascript works, and what you are looking at.

First, you can NOT control the look / feel of an alert. Those are built-in browser functions.

So, to manage the way it looks, you are on the right track to use something like jQuery UI Dialog.

To use the jQuery UI Dialog (https://jqueryui.com/dialog), you call .dialog on the element, like so:

$('#my-dialog').dialog();

In your case, I suspect you want to use it as a "modal confirmation", so you should read these docs: https://jqueryui.com/dialog/#modal-confirmation

To use it that way, you trigger it by passing in certain arguments:

$( "#my-dialog" ).dialog({
  resizable: false,
  height: "auto",
  width: 400,
  modal: true,
  buttons: {
    "Confirm": function() {
      // ** DO THE THINGS YOU WANT when they confirm "Yes" here.
      $( this ).dialog( "close" );
    },
    Cancel: function() {
      $( this ).dialog( "close" );
    }
  }
});

Those arguments are in the structure of a javascript object, with name-value pairs of different options. For example, above resizable is an option name, and false is the value. Be sure to check out the dialog API information to know all of the options, methods, etc.

So, modify the code from your question (copied here):

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

To be something like this:

<script>
    jQuery(function ($) {
        $('#menu2').click(function () {
            $( "#dialog-confirm" ).dialog({
              resizable: false,
              height: "auto",
              width: 400,
              modal: true,
              buttons: {
                "Confirm": function() {
                      // ** DO THE THINGS YOU WANT when they confirm "Yes" here.
                      $( this ).dialog( "close" );
                },
                Cancel: function() {
                      $( this ).dialog( "close" );
                }
              }
            });
        });
    });
</script>

And be sure to have the markup on your page to support this dialog. For example, place something like this just before the closing </body> tag:

<div id="dialog-confirm" title="Are you sure you want to do this?">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>You are about to do something. Are you sure?</p>
</div>

Answer 2

Use Sweet alert Jquery Plugin for highly customized alert

Answer 3

My codes are javascript codes to create a client side custom alert. This is completed:

<style>
    #alertContainer {
        position: fixed;
        width: 100vw;
        height: 100vh;
        z-index: 999;
        background-color: rgba(0, 0, 0, 0.5);
        display: none;
    }
    #alert {
        width: 400px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        position: absolute;
        margin: auto;
        background-color: rgb(173, 173, 173);
        padding: 30px;
        max-width: 100vw;
        height: 130px;
    }
    #ok {
        position: absolute;
        right: 30px;
        bottom: 30px;
    }
</style>

Html must copy after body start tag:

<div id="alertContainer">
    <div id="alert">
        <span id="alertText"> Hello</span>
        <input id="ok" value="ok" onclick="$('#alertContainer').hide();" type="button">
    </div>
</div>

And this is MyAlert function to use insted of javascript alert:

 function MyAlert(text)
    {
        document.getElementById('alertContainer').style.display = "block";
        document.getElementById('alertText').innerHTML = text;
    }

and this is a sample:

<a onclick="MyAlert('How are you')">alert</a>