Html 如何自定义Jquery对话框的位置

单击一个按钮，我将打开一个jquery对话框，如以下代码所示

<div class="editButton">Chat</div>
<div id="dialogContent" title="This is a dialog box">
   <textarea rows="14" cols="40" name="comment"></textarea>
</div>

$(document).on("click", ".editButton", function() {
    $("#dialogContent").dialog("open");
});
$(document).ready(function() {
    $(document).ready(function() {
        $("#dialogContent").dialog({
            autoOpen: false,
            modal: false,
            resizable: false,
            height: 'auto',
            width: 'auto',
            draggable: true,
            closeOnEscape: true,
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "explode",
                duration: 1000
            },
            dialogClass: 'no-close success-dialog',
            buttons: {
                'Submit': function() {},
                'Cancel': function() {
                    $(this).dialog('close');
                }
            }
        });
    });
});

聊天
$（文档）。在（“单击“，”.editButton”，函数（）上{
$（“#dialogContent”）。对话框（“打开”）；
});
$（文档）.ready（函数（）{
$（文档）.ready（函数（）{
$（“#dialogContent”）.dialog({
自动打开：错误，
莫代尔：错，
可调整大小：false，
高度：“自动”，
宽度：“自动”，
真的，
closeOnEscape：没错，
展示：{
效果：“盲”，
持续时间：1000
},
隐藏：{
效果：“爆炸”，
持续时间：1000
},
dialogClass:“无关闭成功对话框”，
按钮：{
“提交”：函数（）{}，
“取消”：函数（）{
$（this.dialog（'close'）；
}
}
});
});
});

你能告诉我如何使这个对话框出现在聊天室的正上方吗

这是我的工作

在jQuery UI中，可以使用

位置

选项，但默认为居中（如示例所示）

默认值：

{my:“center”，在“center”，of:window}

指定打开对话框时应显示的位置。该对话框将处理碰撞，以便尽可能多的对话框可见

以下代码将其定位到右下角，并带有

editButton

高度的偏移量，足以满足您的需要，请将此添加到您的选项中：

draggable: false,
position: { my: "right bottom", at: "right bottom-44" },

---

查看此更新。

jQuery UI对话框的用途是什么？如果你把它去掉并使用普通的HTML/CSS，整个事情就会变得更容易管理。如果聊天按钮由于某种原因必须移动，或者变成可滚动的，那么你又回到了“被困在这件事上，而这件事通常意味着占据页面并坐在中间”

这是另一种方法的示例。您可能希望在“完整页面”中运行它，这样对话框就不会被截断

/*JS仅用于切换容器上的类*/
$（文档）.on（“单击“，”.edit按钮，.chat取消”，切换聊天）；
函数toggleChat（）{
变量$chatWindow=$（'.chat area'）；
$（'注释'）.val（''）；
$chatWindow.toggleClass（'visible'）；
}

/*糟糕的CSS，但希望你能理解。
1） 、2）和3）是要删除的主要位。剩下的就是我在瞎混*/
/*1）默认情况下，#dialogContent是隐藏的*/
#对话内容{
高度：0px；
边缘底部：30px；
溢出：隐藏；
位置：相对位置；
/*使用CSS转换来显示它*/
过渡：高度0.5s缓进缓出；
}
/*2）当有人单击“聊天”时，我们会将类“可见”添加到其中*/
.可见#对话框内容{
显示：块；
高度：270px；
}
.聊天区，
.聊天区*{
框大小：边框框；
}
/*3）将整个容器固定在右下角
然后在其中定位所需的元素*/
.聊天区{
底部：0；
右：10px；
位置：固定；
宽度：200px；
字体系列：helvetica、arial、无衬线字体；
填充：10px；
背景颜色：绿色；
}
#评论{
字体系列：helvetica，无衬线；
字体大小：12px；
利润底部：4倍；
填充：4px；
}
.编辑按钮{
背景：绿色；
底部：0；
颜色：白色；
光标：指针；
高度：30px；
右：0；
填充：0 10px 7px 10px；
位置：绝对位置；
宽度：100%；
}
.可见。编辑按钮：之前{
内容：“关闭”；
宽度：自动；
}
.聊天区h2{
颜色：#fff；
显示：内联块；
字体大小：15px；
利润率：0.4px 0；
}
标题。聊天取消{
颜色：#fff；
显示：内联块；
浮动：对；
光标：指针；
}
钮扣{
背景：#3498db；
背景图像：线性渐变（至底部，#999999，#7a7a）；
边界：0无；
边界半径：5px；
颜色：#ffffff；
光标：指针；
字体系列：Arial；
字体大小：15px；
填充物：5px10px；
文字装饰：无；
}
按钮：悬停{
背景#3cb0fd；
背景图像：线性渐变（至底部，#555555，#4444）；
文字装饰：无；
}

聊天对话框标题
X
取消
拯救
聊天

另一方面，我认为您不需要两个

$（document）.ready（）

。您希望对话框显示在chat

div

上方，是固定的还是可拖动的？@jiagjian fixed会更好，如果很难，也可以拖动。