jQuery dialog with Custom Positioning

by napotopia

HTML

<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
<p> Each dialog below will open a dialog to the right of the clicked anchor. The initial setting of [20, 20] is only a default being overridden by each clicked instance.</p>
<ul>
    <li><a href="#" class="opener">a dialog</a></li>
    <li><a href="#" class="opener">a better dialog</a></li>
    <li><a href="#" class="opener">a cool dialog</a></li>
    <li><a href="#" class="opener">a cooler dialog</a></li>
    <li><a href="#" class="opener">the coolest dialog!</a></li>
</ul>
<div id="myDialog">this is a dialog</div>

CSS

ul, li, p { margin: 10px; }

JavaScript

var $myDialog = $('#myDialog');

$myDialog.dialog({
    autoOpen  : false, 
    draggable : true, 
    resizable : true,
    position  : [20, 20]
});

$('a.opener').on('click', 
          function() {
              var $this = $(this),
                  $offset = $this.offset();
              $myDialog
                  .dialog('open')
                  .dialog('option', 'position', [$offset.left + $this.width() + 10, $offset.top])
                  .dialog('option', 'maxWidth', 980);
          });