В настоящее время я работаю над календарем событий, в котором есть интерактивные модалы, которые извлекают данные из API событий.
Я бы хотел, чтобы пользователи могли закрыть модал при нажатии на «x», а такжекогда они щелкают в любом месте на странице.
В текущей настройке есть выпадающее меню, в котором перечислены, где вы можете выбрать месяц, и вы можете выйти из меню при нажатии в любом месте на странице,Однако я не могу заставить это работать на модал.
Я могу запускать функции в консоли, но не в самом коде.Кнопка «х» просто прекрасно закрывает модал, но не при нажатии в любом месте страницы.
Я использую fullCalendar для рендеринга календаря и передачи данных в модал.Кроме того, мы используем drupal, php и twig.(основа кода это вроде беспорядок, но это еще одна проблема.)
Я включил код, который запускает выпадающий список месяца, где функциональность щелчка в любом месте работает просто отлично.Модальный код расположен внизу.Я знаю, что код можно упростить, но ради устранения неполадок я сломал его.
Я пробовал .show () и .hide (), выполняя функцию в fullCalendar и без, используя $ (), а также jQuery (), и в настоящее время пытаюсь переключить классы и выполнить show /спрятаться в css.Из того, что я прочитал здесь, это может быть связано с тем, что страница не загружается полностью, прежде чем пытаться манипулировать DOM.Но, учитывая, как эта функциональность работает в выпадающих меню, я не думаю, что это так.
(function ($) {
/***| * TABS |***/
$(document).on('click keypress', '.calendar__tabs--title', function (e) {
var id = $(this).attr('id');
if (e.which === 13 || e.type === 'click') {
$('.calendar__tabs--title').removeClass('active');
$('.calendar__views div').each(function () {
if ($(this).data('tab') == id) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
$(this).addClass('active');
}
});
$(document).on('click keypress', '.changeMonth', function (e) {});
//Dropdown
var sel = $('.selected');
var options = $('.options');
var current = $('.current');
var monthChoice = $('.monthChoice');
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var currDate = new Date();
var currMonth = currDate.getMonth();
monthChoice.click(function (e) {
e.stopPropagation();
if ($('.options').css("display") != "none") {
current.text(monthNames[currMonth]);
var date = moment().format("YYYY");
var newMonth = e.target.getAttribute('value').length == 1 ? "0" + e.target.getAttribute('value') : e.target.getAttribute('value');
var newDate = date + "-" + newMonth + "-01";
$("#calendar").fullCalendar('gotoDate', $.fullCalendar.moment(newDate));
$(this).addClass('selected').siblings('div').removeClass('selected');
options.hide();
} else {
current.text(monthNames[currMonth]);
options.show();
}
});
if (options) {
$('body').click(function (e) {
options.hide();
});
}
options.children('div').click(function (e) {
e.stopPropagation();
current.text($(this).text());
var date = (parseInt(sel.attr('value'), 10) < parseInt(e.target.getAttribute('value'), 10)) ? moment().format("YYYY") : moment().add(1, 'year').format("YYYY");
var newMonth = e.target.getAttribute('value').length == 1 ? "0" + e.target.getAttribute('value') : e.target.getAttribute('value');
var newDate = date + "-" + newMonth + "-01";
$("#calendar").fullCalendar('gotoDate', $.fullCalendar.moment(newDate));
$(this).addClass('selected').siblings('div').removeClass('selected');
options.hide();
});
//Views
jQuery(".calendar__tabs--title.month").click(function () {
jQuery("#calendar").fullCalendar('changeView', 'month');
})
jQuery(".calendar__tabs--title.week").click(function () {
jQuery("#calendar").fullCalendar('changeView', 'agendaWeek');
})
//Events
const events = JSON.parse(drupalSettings.events);
console.log(events);
//Calender
jQuery("#calendar").fullCalendar({
header: {
left: "title prev,next",
right: ""
},
columnHeaderHtml: function (mom) {
var view = $("#calendar").fullCalendar("getView");
if (view.name === "agendaWeek") {
return mom.format("DD") + "<br>" + mom.format("ddd");
}
if (view.name === "month") {
return mom.format("ddd");
}
},
defaultDate: new Date(),
navLinks: false,
eventLimit: true,
editable: false,
titleFormat: "MMMM",
displayEventTime: false,
showNonCurrentDates: false,
background: false,
fixedWeekCount: false,
minTime: "09:00:00",
maxTime: "22:00:00",
slotDuration: "00:60:00",
allDaySlot: false,
slotEventOverlap: false,
height: "auto",
selectable: false,
slotLabelFormat: 'h' + ':00' + '(:mm)a',
buttonIcons: true,
buttonText: false,
htmlEscape: false,
events: events.map(function (event) {
return {
title: event.name,
description: event.description,
location: event.locations,
start: event.date_range.start_date,
end: event.date_range.end_date,
event_id: event.nid,
event_image: event.media[0].url,
}
}),
eventClick: function (event, jsEvent, view) {
var eventURL = "https://www.mallofamerica.com/events/view/";
jQuery("#event-img").attr('src', event.event_image);
jQuery("#event-header").text(event.title);
jQuery("#modal-title").text(event.title);
jQuery("#more-info").text(event.description);
jQuery("#event-link").attr('href', eventURL + event.event_id);
jQuery("#myModal").addClass("activate");
jQuery(".close-button").click(function (e) {
var modal = jQuery("#myModal")
modal.removeClass("activate")
})
// jQuery("body").click(function (e) {
// var modal = jQuery("#myModal")
// if (modal.hasClass("activate")) {
// modal.removeClass("activate")
// }
// })
// $("#add-cal").click(function () {
// // $("#calendar").fullCalendar('refetchEventSources')
// $("#calender").fullCalendar('rerenderEvents');
// var subject = event.title;
// var description = event.description;
// var location = "";
// var start = event.start._i;
// var end = event.end._i;
// console.log(subject, description, location, start, end)
// var cal = ics();
// cal.addEvent(subject, description, location, start, end);
// cal.download('event')
// // $('#calendar').fullCalendar('removeEvents');
// })
},
})
}(jQuery)); /* end jquery */