Team Member Popup with jQuery Modal

How to?

  1. Add the Call to Action widget to content area
  2. Setup style as mockup
  3. The most important part is to add a popup content into the Content > Description setting of the plugin. Make sure you put it as show in HTML code below (also check at example below to understand what I’ve mentioned)
  4. Another setting that we need to toggle is link target and relationship you have to put the ID from step 3
  5. Add specific class to the widget 
  6. Copy CSS and JS below and paste into the code blocks.

HTML:

				
					<h4>Office Dood</h4>
<div id="Miley" class="modal">
    <h3> Miley </h3>
    <h4>Office Dood</h4>
    <p>As the one and only Office Dood, Miley's day is always packed with very important tasks. Starting her day early, Miley greets clients and team members at the door. She then makes sure we all get a chance to chat, shake her paw, and give her treats. Sometimes, Miley needs a little rest from the hustle and bustle, so she naps on the couch in David's office, or goes for walks. And despite her very busy routine, Miley still stops to accept treats from the UPS and FedEx drivers.</p>
</div>

CSS:

				
					<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<style>
    /* style heading */
    .team-member h3, 
    .modal h3 {
        font-size: 20px;
        margin-bottom: 0;
    }
    .team-member h4,
    .modal h4 {
        font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
        font-size: 18px;
        color: #be0011;
        font-weight: 400;
    }
    
    /* style modal windows */
    .modal {
        max-width: 551px;
        border-radius: 0;
        padding: 45px;
        background: #fff url(/wp-content/uploads/2021/09/obj-right-red.svg) no-repeat scroll bottom right;
    }

    @media (max-width: 767px) {
        .modal {
            padding: 35px 25px;
        }
    }
</style>

JS:

				
					<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>

Example:

Miley

Office Dood