CODEWITHSUNDEEP
jquery-uidialog
Daniel
Daniel

Reputation: 1074

How to have a jQuery dialog stay inside a div

I have tried to get a dialog (#dialog) stay inside a container div (#dialogContainer), i.e. I don't want it to be possible to drag the dialog outside the boundaries of the container div in the ui, but no success. I thought that the "appendTo" setting would fix this, but not. Any help is appreciated!

Here is an example that shows that it is 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">
    This is 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>

Upvotes: 2

Views: 3431

Answers (1)

Ian A
Ian A

Reputation: 6128

You can use the following code to restrict the dialog so it can't be dragged outside a container:

$("#dialog").dialog({
    ...
})
.parent().draggable({
    containment: '#dialogContainer'
});

See here for a Fiddle.

Upvotes: 2

Related Questions