форма диалога, как в Календаре Google

Question

Я использую FullCalendar в моем asp.net приложения, и мне нужно, чтобы добавить диалог формы как в Google Calendar. Если я нажму на какую-нибудь дату, появится диалоговое окно рядом с этой датой. не в середине страницы. а также фон страницы не становится темным. (фон активен)

Я могу создать диалог формы с помощью 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/)

Для убедившись, что фон не седеют, вы можете установить modal вариант диалогового окна JQuery UI для false:

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

Answer 2

У меня был такой же вопрос. Я создал plnkr. Вы можете вызвать эту функцию для обратного вызова eventClick для получения сведений о мероприятии. Вы также можете вызвать одну и ту же функцию для выбранного события, чтобы отобразить окно быстрого события. с позиции абсолютного css вы можете показать значок стрелки.

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