1

I have a jQuery UI Dialog popup done, and the only issue I have now is that I am unable to move it outside of the containing window. I want to be able to move this dialog popup much like a window that you create using javascript's window.open method (which can be moved anywhere in the screen)

Any suggestions, or ideas? I have tried the containment property buy still not going outside of the parent screen.

Code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0  Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />  
    <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script> 
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" type="text/javascript"></script>  
    <script type="text/javascript">
         $(document).ready(function (){
                $('#dialog').dialog({ draggable: true, resizeable: true, dialogClass: 'main-dialog-class', 
                title: 'Definition', width: 800, height: 600, autoOpen: false, show: { effect: "clip", duration: 1000 },
                    hide: { effect: "explode", duration: 1000}
                })

                $(".opener").click(function () {   $('#dialog').dialog("open"); return false; });

                if (!$.ui.dialog.prototype._makeDraggableBase) {
                    $.ui.dialog.prototype._makeDraggableBase = $.ui.dialog.prototype._makeDraggable;
                    $.ui.dialog.prototype._makeDraggable = function () {
                        this._makeDraggableBase();
                        this.uiDialog.draggable("option", "containment", false);
                    };
                }
            });
    </script>
</head>
<body>
 <div id="dialog" title="Report Definition" style="width:800px; height:800px; overflow:scroll;">  
 <p>This is an animated dialog which is useful for displaying information </p>
 </div> 
<a href="#" class="opener" > click </a>

</body>
</html>
4

1 回答 1

1

您不能使用 jQuery 对话框执行此操作，句号。jQuery 对话框只是一个 HTML 标记，它是页面的一部分。

据我所知，唯一的选择是使用window.open. 您可以使用任何您想要的 HTML，window.open并且您几乎可以完全控制窗口（在某种程度上）。

于 2013-04-08T23:38:32.480 回答