Creating a pop-up modal with Advanced Custom Fields

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.