css Modal jquery方法，包括按钮关闭功能。另外，附带的CSS。 （最初是为PPU在线程序页面创建的。）

Posted 2021-05-13

/Online Programs - Course Offerings section

(function () {
  var CourseTitles = $('.course-titles li');
  var CourseDescriptions = $('.course-descriptions .info');

  function updateInfo() {
    var currentTitle = $(this);
    var id = $(this).attr('id');

    var currentInfo = CourseDescriptions.filter('[data-course=\'' + id + '\']').first();
    // currentInfo = currentInfo[0]

    CourseTitles.removeClass('active');
    currentTitle.addClass('active');

    CourseDescriptions.removeClass('active');
    currentInfo.addClass('active');
  }

  CourseTitles.filter(':first-child').addClass('active');
  CourseDescriptions.filter(':first-child').addClass('active');
  CourseTitles.on('click', updateInfo);

  //modal for mobile - course descriptions
  function updateInfo() {
    var currentTitle = $(this);
    var id = $(this).attr('id');

    var currentInfo = CourseDescriptions.filter('[data-course=\'' + id + '\']').first();
    // currentInfo = currentInfo[0]

    var Wrapper = currentTitle.closest('.course-titles').next('.course-descriptions');
    Wrapper.addClass('active');
    CourseTitles.removeClass('active');
    currentTitle.addClass('active');

    CourseDescriptions.removeClass('active');
    currentInfo.addClass('active');
    }
    //close window
    $('.close-ex').on("click", function(){
        if($('.course-descriptions').hasClass('active')){
           $('.course-descriptions').removeClass('active');
        }else{
            $('.course-descriptions').removeClass('active');
            $('.course-descriptions').addClass("active");
        }
    });
    //end modal
})();

//modal for mobile
@media all and (max-width: 600px) {
    .courses .course-descriptions {
        background: lightgray;

    }
    .course-descriptions {
        flex: 1;
        position: absolute;
        transform: translateX(100%);
        width: inherit;
        z-index: 999;
        transition: .3s ease;
        max-width: 600px;
        height: 100%;
        overflow: scroll;
    }
    .course-descriptions.active {
        transform: translateX(0);
    }
    .close-ex {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }
    .close-ex:hover,
    .close-ex:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
}
@media all and (min-width: 601px) {.close-ex {display: none;}}

@media all and (min-width: 1200px) {
    #vid-left {
      text-align: 0;
      float: left;
    }
    #vid-right h2 { text-align: left;}
    #vid-right {
      width: 50%;
      float: left;
      padding: 25px;
    }
}