我目前正在开发一个事件日历，该日历具有从事件API提取数据的交互式模式。
我希望用户能够在单击"x"以及在页面上的任何位置时关闭模态。
在当前设置中，有一个下拉菜单，列出了允许您选择月份的列表，当按下页面上的任何位置时，您都可以点击菜单。然而，我无法让它为模态工作。
我可以在控制台中触发函数，但不能在代码本身中触发。"x"按钮可以很好地关闭模态，但在单击页面上的任何位置时都不会关闭。
我使用fullCalendar来呈现日历并将数据传递到模态中。此外，我们还利用了drupal、php和trick。(代码基础有点混乱，但这是另一个问题。)
我已经包含了运行月份下拉列表的代码，在该下拉列表中，单击任意位置功能运行良好。模态代码位于底部。我知道代码可以简化，但为了排除故障，我把它分解了。
我尝试过.show()和.hide()，在fullCalendar中执行函数，也没有，使用$()和jQuery()，目前正在尝试切换类并在css中执行show/hide。根据我在这里读到的内容，这可能是由于页面在尝试操作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 */
我最终找到了解决方案！
我不得不从.hide()函数中排除两个div，这样当用户单击事件时，模态仍然会显示。
jQuery(".close-button").on("click", function(e){
console.log(e);
e.preventDefault();
jQuery("#myModal").hide();
})
jQuery("body").click(function(e) {
if (jQuery(e.target).is('.fc-day-grid-event, .fc-title')){
e.preventDefault();
jQuery("#myModal").show();
} else {
jQuery("#myModal").hide();
}
})