如何设置 jQuery UI 对话框相对于不同按钮的定位？答案

【问题标题】：How to set jQuery UI dialog box positioning in relation to different buttons?如何设置 jQuery UI 对话框相对于不同按钮的定位？
【发布时间】：2018-02-28 11:44:31
【问题描述】：

我正在使用 jQuery UI 对话框，该对话框是通过单击页面上的不同按钮来触发的。如何设置对话框相对于其自身触发器的定位？

到目前为止，这是我的代码：

<script>
var dialog = $("#dialog").dialog({
        autoOpen: false,
        width: 300,
        height: 400,
        modal: true,
        open: function(event, ui) {
            $('#btn-quote').css('z-index',1042);
            $('.ui-widget-overlay').on('click', function() {
                dialog.dialog('close');
            });
        },
        position: {
            my: "center top",
            at: "center top+50",
            of: $('#btn-quote')
        }
});
$("#btn-quote, #btn-quote-contact").click(function (e) {
        e.preventDefault()
        dialog.dialog("open");
});
</script>

谢谢

【问题讨论】：

标签： jquery css jquery-ui

【解决方案1】：

您可以使用$(this) 来引用触发按钮。

<script>
var dialog = 
function openDialog(el){
    var dialog = $("#dialog").dialog({
            autoOpen: false,
            width: 300,
            height: 400,
            modal: true,
            open: function(event, ui) {
                $('#btn-quote').css('z-index',1042);
                $('.ui-widget-overlay').on('click', function() {
                    dialog.dialog('close');
                });
            },
            position: {
                my: "center top",
                at: "center top+50",
                of: el
            }
    });
    dialog.dialog("open");
}
$("#btn-quote, #btn-quote-contact").click(function (e) {
        e.preventDefault()
        openDialog($(this));
});
</script>

【讨论】：