Modal dialogs sometimes necessarily need to integrate with a WordPress website. Using modal dialog, we can display the content on the top of the current page.

When it comes to modal pop up, normally people prefer to use Lightbox or Fancybox library. These are the popular libraries and work pretty well.

To include these libraries in WordPress, we have to download the JS and CSS files of a library and include them in the project in the standard way. After that, as per library documentation, we need to wrap content and call the method to open the modal window.

WordPress included the ThickBox jQuery plugin with a modified version in its core. And it can be used in place of external libraries. Using this core feature, we get the interface that is the same as modal popups in WordPress admin like on the media button.

You can give a try for this built-in feature. If it fulfills your needs then it saves time from integrating an external library.

Using ThickBox with inline content, you will get the output something like as shown in the below screenshot.

Modal Dialog Box Using ThickBox

WordPress ThickBox works well with inline content. One can use shortcode also in the modal dialog. As an example, you can show the contact form in the modal window using the contact form 7 shortcode.

Having said that, let’s see how to use ThickBox in WordPress.

For instance, we are displaying dummy inline content at the click of the anchor tag. So, place the below code wherever you want to use the ThickBox.

<?php add_ThickBox(); ?>
<div id="dummy-content-id" style="display:none;">
    <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
</div>
 
<a href="#TB_inline?width=600&height=350&inlineId=dummy-content-id" title="Inline Content" class="ThickBox">View dummy content!</a>

To use the Thichbox, we need to include the first add_ThickBox() method. This function loads the library from the core. Next, on the href attribute on the anchor tag we have to pass #TB_inline along with the width, height, and id of a container in which our inline content is wrapped.

Same way if you need to display the contact form in the modal dialog, then instead of dummy content you need to place a shortcode using the do_shortcode() function of WordPress.

<?php echo do_shortcode('[shortcode_here]'); ?>

That’s it! We hope you understand how to add a modal dialog box using ThickBox in WordPress. We would like to hear your thoughts in the comment below.

You may also like to read our articles Redirect To Thank You Page After Contact Form 7 Submission and How to Save Contact Form 7 Submissions to WordPress Database

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.