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

Question

我正在使用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>

谢谢

Answer 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>