javascript - 在屏幕的给定坐标处显示 JqueryUI 对话框

Question

我正在使用 fullcalendar 开发一个日历网络应用程序.我想模仿谷歌日历来显示有关事件的信息和单击时的删除按钮。我尝试这样做:

    element.bind('mousedown', function (e) {
              if(e.which == 1){
                var Xcord = e.clientX ;
                var Ycord = e.clientY ;
                var X = 'left+' + Xcord.toString() ;
                var Y = 'top+' + Ycord.toString() ;
                console.log(X) ;
                console.log(Y) ;
                var  start = moment(event.start)
                var  end = moment(event.end) 

                //The contents of the dialog box is the start time and end time ... 

                $('#Info').html(start.format('ddd') + " " + start.format('MMM DD') + " " + start.format('hh:mm a') + " - " + end.format('hh:mm a')).css( 'font' , '15px arial, sans-serif');

                console.log(X+' '+Y);
                //I expected the box to open at given coordinates but it is not doing so !!!
                $('#dialog').dialog({

                  position: { my: "center bottom", at: X+' '+Y }
                }); 
    //More code here ... 

但是，对话框不会在给定的坐标处打开。它总是在屏幕上的固定位置(稍微偏左)打开，而我希望它在用户单击的日历事件上方打开。

这个方法有什么问题吗？

还有没有更好的方法来做到这一点。因为即使它有效，如果我向下滚动日历，对话框将不再附加到事件。它将固定在提到的坐标处的屏幕上。

这是 html 和 css 的一部分:

     <div id="dialog" title="Basic dialog"  style="display: none;">
            <p id = 'Info'></p>
           <button type="button" id = 'deleteEvent'> Delete</button>
    </div>

还有 CSS :

    <style type="text/css">
    .ui-resizable-handle.ui-resizable-s::before, .ui-resizable-handle.ui-resizable-s::after {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        left: 150px;
        border-style: solid;
        border-width: 10px;
    }

    .ui-resizable-handle.ui-resizable-s::before {
        border-color: #aaa transparent transparent transparent;
        top: 2px;
    }

    .ui-resizable-handle.ui-resizable-s::after {
        border-color: #fff transparent transparent transparent;
        top: 1px;
    }

    .ui-dialog {
        overflow:visible;
    }

    .ui-dialog-title {
        display:none;
    }

    .ui-dialog-titlebar {
        background:transparent;
        border:none;
    }

    .ui-dialog .ui-dialog-titlebar-close {
        right:0;
    }

Answer 1

我使用 css 执行此操作，这让您可以决定对话框的生成位置，并且在您滚动时也会将其保留在那里，首先在您的 css 中添加此类:(随心所欲地制作它，我使用它所以我的对话框总是在我的屏幕中央)

.fixed-dialog{
  position: fixed;
  top: 50px;
  left: 50px;
}

然后当您创建对话框时，在模态选项中放置以下行:

$("#name").load().dialog(
                {   //Set options for the dialog here
                        dialogClass: 'fixed-dialog'
                });

<罢工>

编辑:如果我理解正确，你想做这样的事情:

$("#dialog").dialog("option", "position", {
     at: "center bottom",
     of: this // this refers to the cliked element
   }).dialog('open');