Get In Touch

  • This field is for validation purposes and should be left unchanged.
Contact Us
Tutorial

Creating a pop-up modal with Advanced Custom Fields

James Bundey

James BundeyNovember 26, 2013

This post has been revisited and updated with a modal plugin that is still supported.

I recently worked on a project where the client requested a basic pop-up advertising solution for their home page that they could easily edit and turn on and off as required. I was really keen to keep the solution as lightweight and simple as possible, so I was reluctant to use a plugin. Also, as a huge fan of Elliot Condon’s magnificent Advanced Custom Fields plugin I thought I’d use it as an opportunity(excuse) to create a custom solution using ACF.

Creating the ACF field group

Firstly the custom field group was created containing all the information fields the client was looking to include. One of the goals of the pop-up was to develop a solution where the fields could be left populated in the admin area at all times, but the active state of the pop-up could be controlled. To enable this I included a simple checkbox option that would control the active state of the pop-up in the theme template.

For this particular project the field group was displayed within the home page in the WordPress admin. However, if I was to use it on a future project the better solution would probably be to create it as an option page.

Creating the Template

As mentioned the visibility of the modal was controlled by a checkbox field, so to have this control the active state of the pop-up the following was added to the front-page.php template.

<?php if (get_field('active')) { 
	get_template_part( 'modal' ) ?>
<?php } ?>

Next the modal.php template was created to display the ACF fields and Zurb’s Reveal was integrated, which provided an extremely lightweight  jQuery solution for the modal.

<div id="myModal" class="reveal-modal">
<a class="close-reveal-modal">&#215;</a>
	<div>
		<h1><?php the_field('pop-up_title') ?></h1>
		<p><?php the_field('pop-up_text') ?></p>		
		<?php if (get_field('pop-up_link')) { ?>
		<div id="modal-link">
			<a href="<?php the_field ('pop-up_link')?>" class="modal-more">Find Out More</a>
		</div><!-- #modal-link -->
		<?php } ?>
	</div>
</div>

Firing the modal

I really wanted the modal to fire on page load, so I modified the jQuery function from the default on-click option. Also, during testing I realised that I wanted to create a smoother transition so a time delay was added using setTimeout.

jQuery(document).ready(function($) {

  	/* Pop-up
  	================================================= */
  	$(function() {
		function showpanel() {
		$('.reveal-modal').reveal({
			animation: 'fade',
			animationspeed: 800
		});
		}
		setTimeout(showpanel, 4000)
	});	
});

The end result was a simple but effective solution, that served the purpose for the project. The great thing about developing it using ACF is the total control it gives me to take this as a basis for creating a comprehensive and true customised solution that could include multiple images or integrate with Gravity Forms etc.

For reference I’ve included the CSS below. It includes the media query updates I made to make it responsive.

/* Modal Pop-up
============================================================ */
.reveal-modal-bg { 
    position: fixed; 
    height: 100%;
    width: 100%;
    background: #000;
    background: rgba(0,0,0,.8);
    z-index: 100;
    display: none;
    top: 0;
    left: 0; 
}
.reveal-modal {
    visibility: hidden;
    top: 100px; 
    left: 50%;
    margin-left: -30%;
    width: 48%;
    background: #fff;
    position: absolute;
    z-index: 101;
    padding: 60px 6% 40px;
    border: 1px solid #ededed;
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
    -box-shadow: 0 0 10px rgba(0,0,0,.4);
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}
.reveal-modal .close-reveal-modal {
    font-size: 22px;
    line-height: .5;
    position: absolute;
    top: 8px;
    right: 11px;
    color: #aaa;
    text-shadow: 0 -1px 1px rbga(0,0,0,.6);
    font-weight: bold;
    cursor: pointer;
}
#myModal p {
    margin-bottom: 26px;
}
#myModal h1 {
    padding-bottom: 20px;
    color: #30a6ff;
}
#myModal ul {
    padding-bottom: 20px;
}
#myModal ul li {
    list-style: none;
    padding: 4px;
}
#myModal #modal-link {
    margin: 100px 0 0;
    position: relative;
    bottom: 5%;
}
/* Responsive Fix */
@media screen and (min-device-width: 0px) and (max-device-width: 479px) {
    .reveal-modal {
        width: 70%;
        left: 50%;
        margin-left: -41%;
    }
    #myModal .span_5 {
        text-align: center;
    }
}
@media screen and (min-device-width: 480px) and (max-device-width: 767px) {
    .reveal-modal {
        width: 60%;
        left: 50%;
        margin-left: -36%;
    }
    #myModal img {
        width: auto;
    }
    #myModal .span_5 {
        text-align: center;
    }
}
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .reveal-modal{width: 80%;}
}

This post has been revisited and updated with a modal plugin that is still supported.

(6 Comments)

  1. Dan Stramer says:

    Hi James, Gret tutorial!
    I need about the same thing just having the popup fire only once a week at a specific hour.
    Do you have an idea how this can be done?
    For example, show the popup every Friday at 17:00

    Thanks
    Dan

  2. Andrew says:

    I’m trying to get the pop-up working. However, I’ve already looped in jQuery ver 1.12.4. However, reveal does not seem to work with this version. Any ideas on how to get it working with the most updated jQuery?

    • James Bundey says:

      Hi Andrew, sorry I haven’t looked at the code for this in a long time and I know that Zurb no longer support the version of reveal that was originally used. I may take some time over the next few days to update it with a new modal solution as this page is probably the most visited on the website.

    • James Bundey says:

      Hi Andrew,

      I’ve been able to get this working with the latest version of jQuery. I’ll be posting an updated article shortly.

  3. James Bundey says:

    Hi Janeth, I’m glad you found it useful.

Have a comment? Leave a reply
James Bundey

James BundeyNovember 26, 2013

BLOG TOPICS

Blog

Blog

Want to say hello?

If you have a question, enquiry, or existing project you'd like us to work with you on, we'd love to hear from you.

Say Hello