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

Posted 2021-03-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>

谢谢

答案

你可以使用$(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>