表单对话框像谷歌日历

Question

我在我的asp.net应用程序中使用FullCalendar，我需要添加表格对话框像谷歌日历。如果我点击某个日期，那么会在该日期附近弹出对话框。不在页面中间。并且页面背景也不会变暗。 （后台处于活动状态）

我可以使用jquery创建表单对话框。但我不知道如何在点击日期附近弹出对话框并保持页面背景活动。

如何创建一个表单对话框这样吗？

Answer 1

您可以挂钩dayClick回调，并使用jsEvent将jQuery UI对话框定位在点击鼠标的位置上方。

E.g.

$('#calendar').fullCalendar({ 
    dayClick: function(date, allDay, jsEvent, view) { 

     $("#dialog").dialog("option", "position", { 
            my: "bottom-10", 
            of: jsEvent 
          }); 

     $("#dialog").dialog("open"); 

    } 
    }); 

（文档为dayClick：http://arshaw.com/fullcalendar/docs/mouse/dayClick/）

为了确保背景不会变成灰色，你可以在jQuery UI的对话框modal选项设置为false：

$("#dialog").dialog({ modal: false }); 

Answer 2

我有同样的问题。我创建了一个plnkr。您可以在eventClick回调事件详细信息时调用该函数。您也可以为选择事件调用相同的函数以显示快速事件框。与位置绝对CSS您可以显示一个箭头图标。

http://plnkr.co/edit/rp8EJ8MVKw6eG9NAdomP?p=preview