jQuery UI Dialog and Button

A simple example of a jQuery UI button and a modal dialog

by ChrisStanyon

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/dark-hive/jquery-ui.css">
<button id="myButton">Click Me</button>

<div id="response">This is the response DIV</div>

<div id="dialogContent" title="This is a dialog box">
    <p>You can have whatever you need inside a dialog box and program the buttons to do whatever you like.</p>
    
    <form action="#" method="post">
        <input type="text" id="myInput" name="myInput" value="" />
    </form>
</div>

CSS

body { padding: 15px; font-size: 11px; font-family: Arial }
#dialogContent { display:none; }
#response { border: 1px solid green; margin-top:20px; padding:15px; }
#dialogContent p { margin-bottom: 1.5em; }

JavaScript

//set up the button styling and click functionality
$('#myButton')
    .button({ icons: { primary: "ui-icon-document" }})
    .click(function() { $( "#dialogContent" ).dialog( "open" ) } );


//set up the dialog box.
$( "#dialogContent" ).dialog({
    autoOpen: false,
    modal: true,
    buttons: {
        OK: function() {
            $('#response').html('The value entered was ' + $('#myInput').val());
            $( this ).dialog( "close" );
        },        
        Cancel: function() {
            $('#response').html('The Cancel button was clicked');
            $( this ).dialog( "close" );
        }
    }
});