Introduction to make a modal popup in WordPress using CSS and Js

In WordPress, a modal popup is a user interface element that appears on top of the main content of a webpage to display additional information. Modals can be useful for displaying content without navigating to a new page, enhancing the user experience by keeping the interaction focused and avoiding page reloads. So, in this article, we will teach you how to make a modal popup using CSS and Js in WordPress without using plugins. 

modal popup using css and js in wordpress

Step 1. Add HTML button for modal popup in WordPress

Here , you need to add button labeled as ” read more “. Once click this button a modal should be popped which shows the detail of the post without loading the detail page. Such detail could be in more general compact design. The button HTML structure is as follows:

<a href="<?php the_permalink();?>" class="readmore-modal" data-modal="<?php echo absint( get_the_ID() );?>">
<?php esc_html_e('Read More', 'theme-name');?>
</a>

Step 2. Add JS in modal-ajax.js

document.querySelectorAll('.readmore-modal').forEach( (element) => {
	element.addEventListener('click',(e)=> {
		e.preventDefault();
		var data      = {
            'postID' 	: e.target.getAttribute('data-modal'),
            'action'    : 'theme_name_modal_popup',
        };
        jQuery.ajax({
            url: context_object.ajaxurl,
            data: data,
            type: 'POST',
            success: function (response) {
          	   jQuery("#modalPostConetentPopup .modal-header").html(response.modalHeader);
          	   jQuery("#modalPostConetentPopup .modal-body").html(response.modalBody);
          	   jQuery("#modalPostConetentPopup .modal-footer").html(response.modalFooter);
               jQuery("#modalPostConetentPopup").modal('show');
            }
        });
	});
});

Step 3. Enqueue above modal-ajax.js in function.php to run it.

function theme_name_modal() {
wp_enqueue_script( 'theme-name-modal-scripts', get_template_directory_uri() . '/assets/js/modal-ajax.js', array('jquery'), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'theme_name_modal', 10000);

Step 4. Create Ajax and enqueue it in function.php

Here make sure that wp_localize_script name ‘theme-name-scripts’ should be same with theme main script enqueue name.

function theme_name_modal_scripts() {

wp_localize_script(
        'theme-name-scripts', 'context_object', array(
        'ajaxurl' => admin_url('admin-ajax.php'),
        )
    );
}
add_action('wp_enqueue_scripts', 'theme_name_modal_scripts', 10000);

Step 5. Make sure other required file also enqueued

Make sure bootstrap.css and its bootstrap.js should be enqueued in function.php and its respective file in specified location. You can download them from here.

function theme_name_bootstrap_scripts() {

wp_enqueue_style('bootstrap-css', get_template_directory_uri().'/assets/css/bootstrap.css', array(), '4.5.0');

wp_enqueue_script('bootstrap-js', get_template_directory_uri().'/assets/js/bootstrap.js', array( 'jquery' ), '4.5.0', true);
}

add_action('wp_enqueue_scripts', 'theme_name_bootstrap_scripts', 10000);

Step 6. Use popup html in footer.php before wp_footer()

    <!-- Modal -->
    <div class="modal fade" id="modalPostConetentPopup" tabindex="-1" role="dialog" aria-labelledby="modalPostConetentPopupTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            
          </div>
          <div class="modal-body">
            
          </div>
          <div class="modal-footer">
                
          </div>
        </div>
      </div>
    </div>

Step 7. Add following code to call ajax in function.php

function theme_name_modal_popup()
{
    $postId         = isset( $_POST['postID']  ) ?  $_POST['postID'] : 0;
    $FullviewText   = __('Full view', 'theme-name');
    $modalHeader    = '<a class="btn btn-primary" href="'.get_the_permalink( $postId ).'">'.$FullviewText.'</a>';
    $content_post   = get_post($postId);
    $modalBody      = $content_post->post_content;
    $closeText      = __('Close', 'theme-name');
    $modalFooter    = '<button type="button" class="btn btn-primary" data-dismiss="modal">'.$closeText.'</button>';
    $return     = [
        'modalHeader'   => $modalHeader,
        'modalBody'     => $modalBody,
        'modalFooter'   => $modalFooter
    ];
    return wp_send_json($return);
    die();
}
add_action('wp_ajax_nopriv_theme_name_modal_popup', 'theme_name_modal_popup');
add_action('wp_ajax_theme_name_modal_popup', 'theme_name_modal_popup');

Here is the example of such modal popup button read out all

Conclusion:-

If you are able to implement above codes in your theme, you will definitely make a modal popup without using any plugins. If need support then you can contact us. We will here to support you. Meanwhile you can see some of our cool free themes here.

Leave a Reply

Share via
Copy link