我在我的应用程序中使用FullCalendarasp.net
,我需要像在Google Calendar中一样添加表单对话框。如果我单击某个日期,则会在该日期附近弹出对话框。不在页面中间。并且页面背景也不会变暗。(背景活跃)
我可以使用 jquery 创建一个表单对话框。但我不知道如何在点击日期附近弹出对话框并保持页面背景处于活动状态。
如何创建这样的表单对话框?
我在我的应用程序中使用FullCalendarasp.net
,我需要像在Google Calendar中一样添加表单对话框。如果我单击某个日期,则会在该日期附近弹出对话框。不在页面中间。并且页面背景也不会变暗。(背景活跃)
我可以使用 jquery 创建一个表单对话框。但我不知道如何在点击日期附近弹出对话框并保持页面背景处于活动状态。
如何创建这样的表单对话框?
您可以挂钩dayClick
回调,并使用 将jsEvent
jQuery UI 对话框定位在单击鼠标的位置上方。
例如
$('#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/ )
为了确保背景不会变灰,您可以将modal
jQuery UI 对话框的选项设置为false
:
$("#dialog").dialog({ modal: false });
我有同样的问题。我创建了一个plnkr。您可以在回调中调用该函数以eventClick
获取事件详细信息。您也可以为选择事件调用相同的函数来显示快速事件框。使用绝对 css 位置,您可以显示箭头图标。