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

Solution 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):

<scripttype='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:

<divid="dialog-confirm"title="Are you sure you want to do this?"><p><spanclass="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>

Solution 2:

Use Sweet alert Jquery Plugin for highly customized alert

Solution 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:

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

and this is a sample:

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