Question

我目前正在使用一个具有交互式模式的事件日历，该模式可从事件API中提取数据。

我希望用户在单击“ x”时以及在页面上的任何位置单击时都能关闭模式。

在当前设置中，有一个下拉菜单列出该菜单，您可以选择月份，并且在按页面上的任意位置时都可以从菜单中单击。但是，我无法使它适用于模式。

我可以在控制台内触发功能，但不能在代码本身内触发。 “ x”按钮可以很好地关闭模式，但是单击页面上的任何位置时都不能。

我正在使用fullCalendar渲染日历并将数据传递到模式中。另外，我们利用drupal，php和twig。（代码有点混乱，但这就是另一个问题。）

我已经包含了运行月份下拉列表的代码，其中“随处点击”功能可以正常运行。模态代码位于底部。我知道代码可以简化，但是为了进行故障排除，我将其分解了。

我尝试过.show（）和.hide（），在fullCalendar中执行该函数，并且不使用$（）以及jQuery（），并且目前正在尝试切换类并在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 */

Answer 1

我最终找到了解决方案！

我必须从.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();
    }
  })

在控制台中工作的功能，但不在代码中工作

1 个答案: