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

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

1 个答案: