JQuery Modal Dialog Box

How to show modal dialog box using JQuery. Here we can set multiple buttons with styles, we can include more dialog properties

Heading1


            


                
Title
                

                
            

                
Project
                

                
            



$(function () {
        $("#projectDetails").dialog({
            autoOpen: false,
            height: 500,
            width: 700,
            modal: true,
            closeOnEscape: false,
            show: {
                effect: "slideDown",
                duration: 1000
            },
            hide: {
                effect: "slideUp",
                duration: 500
            },
            // open: function(event, ui) {
            //       var el = $(this).closest('.ui-dialog').find('.ui-dialog-titlebar-close');
            //       el.off();
            //       el.on("click", fnCustomerHandler);
            //  },
            buttons: [
   {
       text: "Save",
       icons: {
           primary: "ui-icon-mail-closed"
       },
       click: function () {
     // Call you function here
       }
   },
       {
           text: "Save1",
           icons: {
               primary: "ui-icon-disk"
           },
           click: function () {
               // Call you function here
           }
       },
       {
           text: "Cancel",
           icons: {
               primary: "ui-icon-circlesmall-close"
           },
           click: function () {

                 var r = confirm("Are you sure to close the popup!");
                 if (r == true) {
               $(this).dialog("close");
               //  window.location.href = "http://regula:19430/ITProjectPortfolio";
                 return true;
              
                 } else {

                 }


           }
       }

            ]

        });
    });

// to open open this you can call as below
$("#projectDetails").dialog("open"); // projectDetails ID of your popup main div tag