【jQuery】要素が消えずに困っています。
jQuery の FullCalendar をカスタマイズしているのですが、
要素が消えずに困っています。
【希望】
カレンダー内のイベントをクリックすると、
ポップアップみたいに、詳細を表示。
ポップアップ以外をクリックで、ポップアップの非表示。
【現状】
ポップアップの表示まではできています。
カレンダー内のイベントのない日付をクリックするとポップアップは消えますが、
ポップアップが出てる状態で、カレンダー外の部分をクリックすると、
ポップアップがカーソルの場所で再表示されてしまいます。
色々調べて試してみたのですが、ちょっと分からず、
どなたかご教示いただけませんでしょうか。
よろしくお願い致します。
ソース記載します。
$(document).ready(function() {
$('body').append('<div class="tooltiptopicevent" style="background-color:#eeeeee; position:absolute; z-index:10000; padding: 10px; line-height: 200%;">details</div>');
$('body').click(function(e) {
$('.tooltiptopicevent').css('top', e.pageY + 10);
$('.tooltiptopicevent').css('left', e.pageX + 20);
});
$('.tooltiptopicevent').hide();
$('#calendar').fullCalendar({
editable: true,
googleCalendarApiKey: 'hogehogehogegehogegehoge',
eventSources: [
{
googleCalendarId: 'hogehogehogegehogegehoge@group.calendar.google.com',
className: 'calendar_1'
}
],
eventClick: function (data, event, view) {
$('.tooltiptopicevent').html('イベント名 ' + ': ' + data.title + '</br>' + '詳細 ' + ': ' + [data.description,""][1*(data.description==undefined)]);
$('.tooltiptopicevent').show();
},
dayClick: function (data, event, view) {
$('.tooltiptopicevent').hide();
},
});
});
お礼
遅くなってもうしわけありません。情報ありがとうございました。 調べた限りではWEBサイトに掲載するアプリとしては向いてなさそうでした。 ひきつづき、探したいと思います。 ありがとうございました。