将对话框封闭在一个区域内

Question

在 http://jqueryui.com/dialog/ 上，他们使用 iframe 将对话框封闭在页面的一个区域内。不使用 iframe 可以实现吗？

我试过将对话框附加到容器中，但这只会影响它在 DOM 中的位置，对话框仍然可以到处移动。

这是我目前的尝试：

$("#terminal[type=launcher]").click(function(){
                $("<div />")
                .dialog({
                    "title" : "root@" + window.location.hostname,
                    "width" : 400,
                    "height" : 300,
                    "modal" : false,
                    "resizable" : true,
                    "close" : function(){ $(this).remove(); },
                    "Cancel" : function(){ $(this).dialog("close"); },
                    appendTo : "#main_section"
                })
                .dialogExtend({
                    "close" : true,
                    "maximize" : true,
                    "minimize" : true,
                    "dblclick" : "collapse",
                    "titlebar" : false
                })
                .draggable({ containment: "parent" });
            });

Answer 1

jQuery 可拖动

Constrain the movement of each draggable by defining the boundaries of the draggable area. Set the axis option to limit the draggable's path to the x- or y-axis, or use the containment option to specify a parent DOM element or a jQuery selector, like 'document.'

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

您可以在任何父元素中包含该对话框。使用 jQuery UI 可拖动。

jQuery UI Draggable Constrain Movement

将对话框封闭在一个区域内

Keep dialog box enclosed within an area

jquery

jquery-ui

jquery-ui-dialog