html - 如何自定义定位 Jquery 对话框

Question

点击一个按钮，我将打开一个 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');
                }
            }
        });
    });
});

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

这是我的jsfidle

https://jsfiddle.net/g4sgoe45/3/

Answer 1

来自 jQuery UI documentation ，您可以使用 position 选项，但它默认为居中(如您的示例所示)。

Default: { my: "center", at: "center", of: window }

Specifies where the dialog should be displayed when opened. The dialog will handle collisions such that as much of the dialog is visible as possible.

将以下代码定位到右下角并为您的 editButton 高度设置偏移量就足够了，请将其添加到您的选项中:

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

查看此更新 fiddle .