How to Set up the NCCU.edu Popup Component

Component Location

The block used for this component can be found on the site’s “Block layout” page, under the “Content” region.
https://www.nccu.edu/admin/structure/block

By default, the block's settings are as follows:

  • Title: Popout
  • Pages:
    • /admin/*
    • Hide for the listed pages
  • Roles:
    • Anonymous Users
    • News Editor CM

Editing the Block Markup/HTML

To edit the block, head over to the Custom block library and search for "Popout." The markup for the block looks like this:

<div class="popout" id="popoutContainer">


<a class="popout-btn" href="https://www.nccu.edu/admissions"><svg fill="#e8eaed" height="24px"          viewBox="0 -960 960 960" width="24px" xmlns="http://www.w3.org/2000/svg"><path d="M840-280v-276L480-360 40-600l440-240 440 240v320h-80ZM480-120 200-272v-200l280 152 280-152v200L480-120Z"></path></svg>Apply Now</a>


<a class="popout-btn" href="https://www.nccu.edu/institutional-advancement/giving-online"><svg fill="#e8eaed" height="24px" viewBox="0 -960 960 960" width="24px" xmlns="http://www.w3.org/2000/svg"><path d="M280-159v-361h64q7 0 14 1.5t14 3.5l277 103q14 5 22.5 18t8.5 27q0 21-14.5 34T632-320H527q-5 0-7.5-.5T513-323l-64-25-13 39 77 27q2 1 6 1.5t7 .5h274q32 0 56 23t24 57L561-80l-281-79ZM40-80v-440h160v440H40Zm600-360L474-602q-31-30-52.5-66.5T400-748q0-55 38.5-93.5T532-880q32 0 60 13.5t48 36.5q20-23 48-36.5t60-13.5q55 0 93.5 38.5T880-748q0 43-21 79.5T807-602L640-440Z"></path></svg>Give Now</a>


<a class="popout-btn" href="https://engage.nccu.edu/campus-tours"><svg fill="#e8eaed" height="24px" viewBox="0 -960 960 960" width="24px" xmlns="http://www.w3.org/2000/svg"><path d="M480-480q33 0 56.5-23.5T560-560q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 33 23.5 56.5T480-480Zm0 400Q319-217 239.5-334.5T160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 100-79.5 217.5T480-80Z"></path></svg>Visit Campus</a>


</div>

All three buttons are wrapped in a container with the class “popout” and the id=”popoutContainer”.

Each button is denoted by an anchor tag ("a tag"). Within each a tag, it has a class of “popout-btn” and an href attribute that links the button to a URL.

There’s also an svg tag within each anchor tag. The svg is the icon for the button. 

Styling the Block

The styles for the block are located in the following file:
/home/ide/project/docroot/themes/custom/nccu/style/css/style.css

Included below are comments that explain the purpose of the styles.

@media screen and (min-width: 1024px) {
    - when the screen’s width is over 1024px, the popout will appear and the
      Menu items will be hidden
    ul.menu.m--menu.m--utility li:nth-last-child(-n+3) {
      display: none;
  }
    - the popout will be fixed to the right side of the screen
  .popout {
      position: fixed;
      top: 42%;
      right: 0;
      z-index: 200;
      text-align: left;
      transition: 0.25s ease-in;
  }
    - the button popout styles
  .popout-btn {
      display: flex;
      padding: 1rem;
      background: #5B6770;
      color: #ffffff;
      font-weight: 500;
      margin-bottom: .5rem;
      margin-right: -8rem;
      transition: 0.25s ease-in;
  }
    - popout button icon styles
  .popout-btn svg {
      fill: #fff;
      width: 24px;
      height: 24px;
      margin-right: 1rem;
  }
    - when user hovers over popout button
  .popout:hover .popout-btn {
      transition: 0.2s ease-out;
      margin-right: 0;
  }


  .popout.active .popout-btn {
      transition: 0.2s ease-out;
      margin-right: 0;
  }


  .popout-btn {
    text-decoration: none;
  }


  .popout-btn:hover {
    color: #ffffff !important;
    background: #3e474e;
  }
}

Editing the JavaScript Code

The JavaScript code is currently located in the “General Scripts” Asset Injector. This code will slide the popouts out for 2 seconds and then slide them back in.

document.addEventListener('DOMContentLoaded', () => {
  const popoutContainer = document.getElementById('popoutContainer');
  // Add the "active" class to slide in on load
  popoutContainer.classList.add('active');


  // After 2 seconds, remove the "active" class to return to normal behavior
  setTimeout(() => {
    popoutContainer.classList.remove('active');
  }, 2000);
})aa

Menu Change

Since the popout will disappear when the screen’s width is 1024px, the popout links will then appear in the dropdown mobile menu.

Was this helpful?
0 reviews
Print Article

Attachments (0)

No attachments found.