Creating a pop-up modal with Advanced Custom Fields – Revisited

This tutorial is an update of a post I originally wrote in 2013. It’s one of the most visited pages on our website and a recent comment prompted me to create an updated post with a solution that works with the latest version of jQuery and uses a modal plugin that is still supported.

This was originally created as an alternative to adding a plugin and is designed  to be lean and lightweight. The requirements and functionality are quite simple. However, by using Advanced Custom Fields (ACF) you can pretty much make this support whatever fields or media you require.

Please note for this example I’ve added the functionality to an Options panel. If you want to do it this way you’ll need the Pro version of the plugin, however it can be implemented on the free version.

Step 1 – Create the ACF field group

First step is to create the custom field group. The example here contains a few standard field types, including a select field. This was added to enable the user to switch the modal ‘on’  and ‘off’ as required, it also ensures that we can control the loading of the supporting js & css which eliminates the loading of unnecessary resources if it’s not in use.

The following are added as choices to the ‘Select’ field.

When using ACF I always take advantage of the local json support. If you want you can download the json file here and add it to a ‘acf-json’ folder in your theme.

Once add the field is set-up you can then enter the content for the modal in the options panel.

 Step 2 – Creating the Template for the WordPress theme

As mentioned prior the active state of the modal is controlled by a select field. In this example I only want the modal to be active on the home page of the website, so the following was added to the header.php template.

<?php
 // check we're on the front page
 if(is_front_page()) {
  // grab the select field data
  $active = get_field('active', 'option');		
  // check the selection
  if($active == 'yes') {
   // get the modal code
   get_template_part( 'modal' );
  } 
 }
?>

Next the modal.php template was created to display the ACF fields. jQuery Modal is the plugin that I’m using for this example. It was chosen because it is extremely simple & lightweight.

<div id="modal" class="modal" style="display:none;">
  <h1><?php the_field('pop-up_title', 'option') ?></h1>
  <p><?php the_field('pop-up_text', 'option') ?></p>
  
  <?php if (get_field('pop-up_link', 'option')) { ?>
   <div id="modal-link">
    <a href="<?php the_field ('pop-up_link', 'option')?>" class="modal-more">Find Out More</a>
   </div><!-- #modal-link -->
  <?php } ?>
</div>

Step 3 – Adding js to your WordPress theme

Add the following to the functions.php file. You’ll need to update the file path for ‘jquery.modal.min.js’ as required.

// Works with the latest version of jQuery
if (!is_admin()) {
 wp_deregister_script('jquery'); // Deregister WordPress jQuery
 wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', 'jquery', '3.1.1', true); // Load Google CDN jQuery
 wp_enqueue_script('jquery'); // Enqueue it!
}

// Load modal script
function load_javascript_file() {
 $active = get_field('active', 'option');
  if($active == "yes") {
   wp_register_script('modal', get_template_directory_uri() . '/js/libs/jquery.modal.min.js', 'jquery', '', true);
   wp_enqueue_script('modal');
  }
}
add_action('wp_enqueue_scripts', 'load_javascript_file' );

Step 4 – Firing the modal

In this example I wanted the modal to fire 2 seconds after the page loaded and only on the home page. To achieve this I needed to modify the jQuery function from the default ‘on-click’ option and added the following code to the footer.php template in the theme.

<?php if(is_front_page()) { ?>
 <script type="text/javascript">
  $(document).ready(function() {
   function showpanel(){
    $('#modal').modal({
     // add the plugin options as required
     fadeDuration: 600,
     fadeDelay: 0.6,
     closeText: '&#215;'
    });
   }
   setTimeout(showpanel, 2000) //set the delay time
  });
 </script>
<?php } ?>

The Result

The end result is a simple, lightweight and flexible solution that can be easily modified to suit a variety of requirements.

Styling the modal

The ‘jQuery Modal’ plugin comes with a very simple and lightweight css that is perfectly fine for styling. However, for the example shown above I created a sass file that you could easily be transferred between projects. I’ve added this below.

// Modal options
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -o-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}
.border-radius {
  @include border-radius(10px);
}

@mixin box-shadow($size, $color) {
  -webkit-box-shadow: 0 0 $size $color;
  -moz-box-shadow: 0 0 $size $color;
  -o-box-shadow: 0 0 $size $color;
  -ms-box-shadow: 0 0 $size $color;
  box-shadow: 0 0 $size $color;
}
.box-shadow {
  @include box-shadow(10px, #121212);
}

$modal-width: 60%;
$modal-padding: 50px;
$background-color: #fff;

.transition {
  transition: 0.3s ease-in-out;
}

// Text options
$text-align: left;
$font-size: 16px;
$line-height: inherit;
$font-color: inherit;

// Link Options
@mixin button-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -o-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}
.button-radius {
  @include button-radius(6px);
}

$button-background: #555;
$button-font-color: #fff;
$button-font-size: 13px;
$button-font-style: uppercase;
$button-font-weight: 600;
$button-padding: 12px 26px;

.blocker {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 9998;
  padding: 20px;
  box-sizing: border-box;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.75);
  text-align: center;

  &:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.05em;
  }

  &.behind {
    background-color: transparent;
  }
}
.modal {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  z-index: 2;
  max-width: $modal-width;
  box-sizing: border-box;
  background: $background-color;
  padding: $modal-padding;
  @extend .border-radius;
  @extend .box-shadow;
  text-align: $text-align;

  a.close-modal {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    position: absolute;
    font-size: 26px;
    font-weight: normal;
    top: 16px;
    right: 18px;
    @extend .transition;

    &:hover {
      opacity: 0.6;
      cursor: pointer;
    }
  }
  p {
    font-size: $font-size;
    line-height: $line-height;
    color: $font-color;
  }
  #modal-link a {
    background-color: $button-background;
    color: $button-font-color;
    font-size: $button-font-size;
    text-transform: $button-font-style;
    font-weight: $button-font-weight;
    text-align: center;
    transition: ease-in-out 0.5;
    padding: $button-padding;
    @extend .button-radius;
    display: inline-block;

    &:hover {
      opacity: 0.7;
      @extend .transition;
    }
  }
}

// Responsive fixes
@media screen and (min-width: 0px) and (max-width: 767px) {
    .modal {
      max-width: 100%;
      padding: 20px;
    }
}