表格对话框，如Google日历

Question

我在asp.net应用中使用FullCalendar，我需要在 Google日历中添加表单对话框。如果我点击某个日期，则会在该日期附近弹出对话框。不在页面中间。页面背景也不会变暗。 （背景有效）

我可以使用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回调中调用该函数以获取事件详细信息。您也可以为select事件调用相同的功能来显示快速事件框。使用绝对位置css，您可以显示箭头图标。

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