You can create a popup modal when posting data in WordPress by using jQuery and a modal plugin, such as the jQuery Modal plugin. Here’s an example of how to use this plugin to create a popup modal when posting data:
- First, you need to enqueue the jQuery Modal plugin and jQuery in your theme’s
functions.php
file or in a separate plugin:
function enqueue_modal_scripts() {
// Enqueue jQuery Modal plugin
wp_enqueue_script( 'jquery-modal', get_template_directory_uri() . '/js/jquery.modal.min.js', array( 'jquery' ), '1.0', true );
// Enqueue jQuery
wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_modal_scripts' );
- Next, you need to add a button or link that will trigger the modal. You can do this using a standard HTML element with a class or ID that you can use as a selector in jQuery:
<a href="#my-modal" class="open-modal">Open Modal</a>
In this example, we’re using an a
element with a href
that matches the id
of the modal element we’ll create later. We’re also giving the link a class of open-modal
that we can use as a selector in jQuery.
- Now, you can add the modal element to your page or post. You can add it directly to your post content, or you can add it to your theme’s
header.php
file or another template file that is loaded on all pages. Here’s an example of how to create a simple modal:
<div id="my-modal" class="modal">
<p>Your post has been submitted.</p>
</div>
In this example, we’re using a div
element with an id
of my-modal
and a class of modal
to create the modal. Inside the div
, we’re adding a p
element with a message to display to the user.
- Finally, you can use jQuery to listen for the form submission event, and then show the modal when the form is submitted:
jQuery(document).ready(function($) {
$('form').on('submit', function(e) {
// Prevent the form from submitting normally
e.preventDefault();
// Submit the form via AJAX
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function() {
// Show the modal when the form is successfully submitted
$('.open-modal').modal();
}
});
});
});
In this example, we’re using jQuery to listen for the form submission event using the on
method. When the form is submitted, we prevent the default form submission behavior using e.preventDefault()
. Then, we submit the form data via AJAX using the $.ajax
method. When the form is successfully submitted, we use the jQuery Modal plugin to show the modal using the .modal()
method.
Note that you may need to adjust this code depending on your specific use case. This example assumes that you want to show the modal when a form is submitted, but you can modify the code to show the modal in response to other events if needed.
Last modified: February 20, 2023