How to have a jQuery dialog stay inside a div -
i have tried dialog (#dialog) stay inside container div (#dialogcontainer), i.e. don't want possible drag dialog outside boundaries of container div in ui, no success. thought "appendto" setting fix this, not. appreciated!
here example shows indeed possible: https://jqueryui.com/dialog
code:
<div id="dialogcontainer" style="width:600px;height:500px;border:1px solid blue;"></div> <div id="dialog" title="dialog title"> dialog content. </div> <script type="text/javascript"> $(document).ready(function () { $("#dialog").dialog({ position: { my: 'left top', at: 'left', of: $('#dialogcontainer') }, draggable: true, appendto: "#dialogcontainer", modal:true }); }); </script>
you can use following code restrict dialog can't dragged outside container:
$("#dialog").dialog({ ... }) .parent().draggable({ containment: '#dialogcontainer' });
see here fiddle.
Comments
Post a Comment