JUICE UI

Supercharge ASP.NET
Web Forms with jQuery UI

dialog

Interaction — Creates a dialog/window for the user to interact with.

A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default.

If the content length exceeds the maximum height, a scrollbar will automatically appear.

A bottom button bar and semi-transparent modal overlay layer are common options that can be added.

Placing the following server tag into your document <juice:dialog .../> will initialize a dialog instance and will auto-open the dialog by default. If you want to reuse a dialog, the easiest way is to disable the "auto-open" option with: <juice:dialog AutoOpen="false" .../> The dialog can then be triggered by javascript as such: $(foo).dialog('open')

Examples

Example 1

<div id="_Default" class="basic-dialog" title="Basic dialog" runat="server">
	<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<juice:dialog TargetControlID="_Default" AutoOpen="false" runat="server" />

<p>
	<button id="_DefaultButton" class="open-dialog" runat="server">Open Dialog</button>
	<juice:button TargetControlID="_DefaultButton" runat="server" />
</p>

<script type="text/javascript">
    // Respond to the click
	$( ".open-dialog" ).click( function ( e ) {
		e.preventDefault();
		// Open the dialog
		$( ".basic-dialog" ).dialog( "open" );
	});
</script>

This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

Properties