Dialog window example using jQuery and jQuery UI

Click this button and dialog will appear:



Code:

<button onclick="open_dialog()">Click here for the dialog</button>
<div id="dialog" title="Dialog" style="display:none;">
<p>Hello People.</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css"></link>
<script>
    dialog = $("#dialog").dialog({
        autoOpen: false,
        //Use the following line to hide the x button to close.
        open:function(event,ui){
                //Hiding the title bar
                $(".ui-dialog-titlebar").hide();
                $(".ui-dialog-titlebar-close").hide();
                //Binding close
                $('.ui-widget-overlay').on('click',function(){
                        dialog.dialog('close');
                });
        },
        modal: true,
        closeOnEscape: true,
        draggable: false,
        width: "50%",
        show: "fade",
        hide: "fade",
        buttons:{
            "Do something":function(){
                $(this).dialog('close');
            },
            //Use the following to add a new button.
            /*"Close":function(){
                $(this).dialog('close');
            }*/
        }
    });
    function open_dialog(){
        dialog.dialog('open');
    }
</script>

Hello People.