Demo of changing position of Dialog box using JQuery

<div class="row">
<div class="col-md-4 col-md-offset-3"><button id="b1"> Left Top</button></div>
<div class="col-md-4"><button id="b2"> Right Top</button></div>
</div>


<div class="row">
<div class="col-md-4 col-md-offset-5"><button id="b3">Center Center</button></div>
</div>

<div class="row">
<div class="col-md-4 col-md-offset-3"><button id="b4">Left Bottom</button></div>
<div class="col-md-4"><button id="b5">Right Bottom</button></div>
</div>


<div class="row">
<div class="col-md-4 col-md-offset-5"><button id="b6">Right Top of this Button</button></div>
</div>

<div id="my_dialog" title="plus2net  dialog">
  <p>This box changes its position</p>
</div>

<script>
$(document).ready(function() {
$(function() {
$( "#my_dialog" ).dialog({
autoOpen: false
});
});
$("#b1").click(function(){
$("#my_dialog").dialog("option", "position", { my: "left top", at: "left top", of: window} );
$( "#my_dialog" ).dialog( "open" );
})
///////////////////
$("#b2").click(function(){
$("#my_dialog").dialog("option", "position", { my: "right top", at: "right top", of: window} );
$( "#my_dialog" ).dialog( "open" );
})
///////////////////
///////////////////
$("#b3").click(function(){
$("#my_dialog").dialog("option", "position", { my: "center center", at: "center center", of: window} );
$( "#my_dialog" ).dialog( "open" );
})
///////////////////
$("#b4").click(function(){
$("#my_dialog").dialog("option", "position", { my: "left bottom", at: "left bottom", of: window} );
$( "#my_dialog" ).dialog( "open" );
})
///////////////////
$("#b5").click(function(){
$("#my_dialog").dialog("option", "position", { my: "right bottom", at: "right bottom", of: window} );
$( "#my_dialog" ).dialog( "open" );
})
///////////////////
$("#b6").click(function(){
$("#my_dialog").dialog("option", "position", { my: "left top", at: "right top", of: '#b6'} );
$( "#my_dialog" ).dialog( "open" );
})
})</script>