popup dialog

by roblugt

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css">
<body>
    <form method="post" action="DialogTest.aspx" id="form1">
    <div>

        <a href="#" onclick="showUrlInDialog('/echo/html/', event); return false;">show dialog 123</a>
        <a href="#" onclick="showUrlInDialog('/echo/html/', event); return false;">show dialog 456</a>
		<br />
		<input type="date" id="dtDate" />
		<input type="email" id="emlEmail" />
		<input type="datetime" id="dtTime" />
    </div>
    </form>
</body>

CSS

.popup-loading {
  		background: url(Images/ajax-loader.gif) no-repeat;
		background-position: center;
  	}
  	.popup-container {
  		min-width:200px;
		min-height:100px;
  	}

JavaScript

function showUrlInDialog(url, event, options) {
			options = options || {};
			var tag = $("<div class='popup-dialog'></div>"); //This tag will the hold the dialog content.
			var container = $("<div class='popup-container'></div>");// separate div which doesnt have its styles modified by ui.dialog
			var content = $("<div style='display:none;'></div>");
			container.addClass('popup-loading');
			tag.append(container);
			container.append(content);
			$.ajax({
				url: url,
				type: (options.type || 'post'),
				dataType: 'text',
                data: { html: 'hello world', delay: 2 },
				beforeSend: options.beforeSend,
				error: function (jqXHR, statusText, error) {
					tag.html('Error loading content: ' + error);
				},
				success: function (data, textStatus, jqXHR) {
					var html;
					if (typeof data == "string") {
						html = data;
					}
					else {
						if (typeof data == "object" && data.d) { //response is assumed to be JSON
							html = data.d;
						} else if (typeof data == "object" && data.nodeType) { //response is assumed to be DOM
							if (typeof window.XMLSerializer != "undefined") {
								html = (new window.XMLSerializer()).serializeToString(data);
							} else if (typeof xmlNode.xml != "undefined") {
								html = xmlNode.xml;
							}
						}
					}
					container.removeClass('popup-loading');
					content.html(html).show('fast'); // animate so the dialog grows in increments
				}
			});

			tag.on("focusout", function () { console.log("focusout"); });

			tag.dialog({
				autoOpen: true,
				width: 'auto',
				height: 'auto',
				modal: options.modal || false,
				resizable: false,
				title: options.title,
				closeText: 'Close',
				show: { effect: 'fade', duration: 500 },
				hide: 'blind',  //seems this doesn't work in ui 1.8.20, as it sometimes leaves the dialog opem. Could be related to ticket #5860
				position: {
					my: "left top",
					at: "right bottom",
					of: event,
					offset: "20 20"
				},
				beforeClose:...