How to Create Javascript Alert Dialog Modal Box with Three Buttons Using jQuery UI Full Project For Beginners

How to Create Javascript Alert Dialog Modal Box with Three Buttons Using jQuery UI Full Project For Beginners

 

Welcome folks today in this blog post we will be building a javascript alert dialog modal box with three buttons using jquery ui. All the full source code of the application is given below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

<html>
  <head>
  <title>Your title goes here</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
      <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css">
  </head>
  <body>
      <button class="click_me">Click here</button>
      <script type="text/javascript">

          $(function() {
            $('.click_me').click(function(e) {
                e.preventDefault();
                var message_alert = $('<p>Are you confirmed?</p>').dialog({
                    buttons: {
                        "Yes": function() {alert('you clicked on yes');},
                        "No":  function() {alert('you clicked on no');},
                        "Cancel":  function() {
                            alert('you clicked on cancel');
                            message_alert.dialog('close');
                        }
                    }
                 });
            });
         });

        </script>
  </body>
<html>

 

See also  AJAX JQUERY AND PHP REGISTRATION FORM

 

Now if you open the index.html file inside the browser you will see the below screenshot

 

 

Leave a Reply