placing a jquery dialog inside a div (towards creating 3 column layout using jquery)


<link href="css/start/jquery-ui-1.8.11.custom.start.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>

<script type="text/javascript">
$(function () {

// Dialog
$('#dialog').dialog({
autoOpen: true,
draggable: false,
width: '30%',
position: {
my: 'left top',
at: 'left',
of: $('#div1')
},
buttons: {
"Ok": function () {
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});

//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function () { $(this).addClass('ui-state-hover'); },
function () { $(this).removeClass('ui-state-hover'); }
);

});
</script>
<!-- ui-dialog -->
<div id="dialog" title="Dialog Title">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div><div id="div1">The dialog will be placed Inside This
</div>

For more information in positioning the dialog, visit the jquery dialog position section  http://docs.jquery.com/UI/Position#options

One thought on “placing a jquery dialog inside a div (towards creating 3 column layout using jquery)

  1. f you make your dialog box’s position:absolute, then its taken about of the regular page flow, and you can use the left and top property to place it anywhere on the page.

    $(‘.selector’).dialog({ dialogClass: ‘myPosition’ });

    and define the myPosition css class as:

    .myPosition {
    position: absolute;
    right: 200px;
    }

    You can set the top, left, right, and bottom properties for myPosition using either a length such as in pixels or percentage.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s