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

Question

我正在使用 fullcalendar 开发日历 Web 应用程序。我想模仿 google 日历来显示有关事件的信息，并在 clicked.I 尝试执行时显示删除按钮这：

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

但是对话框在给定的位置不打开 ordianates.It 总是在屏幕上的固定位置（中心稍微偏左）打开，而我希望它在日历事件的正上方打开用户点击了。

这种方法有什么问题吗？

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

这是 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 中添加此 class: （随心所欲地制作它，我使用它所以我的对话框总是在屏幕中央）

.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');

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

Displaying the JqueryUI dialog box at a given coordinates of the screen

javascript

css

jquery

jquery-ui

fullcalendar