Jquery ui 如何使jQuery UI对话框始终包含在特定的DIV中？

我正在使用jqueryui对话框。对话框的HTML本身驻留在li标记中，以便它可以与该li对齐

问题是，当我单击调用对话框的按钮时，对话框的HTML不再驻留在li标记中，因此它没有与之对齐。它显示为我的站点中最高DIV的子级

我怎样才能把它锚定在li上

提前谢谢

代码示例：

$('#login-dialog').dialog({
    autoOpen : false,
    resizable : false,
    draggable : false,
    width : 400

});
$('#login').click(function(event) {
    event.preventDefault();
    $('#login-dialog').dialog('open');
});

HTML:

---

谢谢你的回答，这正是我想要的！

                    <li id="loginBox">
                         <a href="#" id="login">Login</a>
                         <div id="login-dialog" title="Login to Townflicks">
                            <form method="post" action="http://${pageContext.request.serverName}/http">
                                <input type="email" name="j_username"/><br/>
                                <input type="password" name="j_password"/><br/>
                                <input type="checkbox" name="remember"/> Remember me
                                <a href="/forgotpassword">Forgot password</a><br/>
                                <input type="submit" value="Login &gt;&gt;"/>
                            </form>
                        </div>
                    </li>