Opening a JQuery modal window on click of a button with a JQuery plugin

Question

I am trying to open a Jquery Modal window on click of a button. And inserting this Button into a plugins content template (WP SHow posts). I'm using jquerymodal.com's modal code, since I don't need a lot of excessive functionality. But so far, its not working.

I included jquery through googleapis and the jquerymodal plugin in my themes functions.php file like this, only wanting to use it on a specific page:

if (!is_admin()) {
wp_deregister_script('jquery');
wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', 'jquery', '3.1.1', true);
wp_enqueue_script('jquery');
}

function load_javascript_file() {
    wp_register_script('modal', get_template_directory_uri() . '/js/jquery.modal.min.js', 'jquery', '', true);
}
add_action( 'init', 'load_javascript_file' );

function conditionally_load_javascript_file() {
    if ( is_page( 'kundenprofile' ) ) {
      wp_enqueue_script('modal');
    }
}
add_action('wp_enqueue_scripts', 'conditionally_load_javascript_file' );

And added the jquerymodal css like this, also in the themes functions.php:

function wpse39139_register_more_stylesheets() {
    wp_register_style( 'modal', get_template_directory_uri() . '/jquery.modal.min.css' );
}
add_action( 'init', 'wpse39139_register_more_stylesheets' );

function wpse39139_conditionally_enqueue_my_stylesheet() {
    // only enqueue on product-services page slug
    if ( is_page( 'kundenprofile' ) ) {
        wp_enqueue_style( 'modal' );
    }
}
add_action( 'wp_enqueue_scripts', 'wpse39139_conditionally_enqueue_my_stylesheet' );

I then added the modal content into the plugins template file (see first div inside the header), where I want to use it. This is the complete section where I tried to insert the modal divs:

<header class="wp-show-posts-entry-header">


    <div id="ex1" class="modal">
        <p>Thanks for clicking. That felt good.</p>
            <a href="#" rel="modal:close">Close</a>
    </div>



    <div class="entry-header-wrap">
        <?php

        do_action( 'wpsp_before_title', $settings );
        echo wp_show_posts_profile_picture();
        echo '<div class="profile-head"' . $settings[ 'inner_wrapper_style' ] . '>';
        $before_title = sprintf(
        '<%1$s class="wp-show-posts-entry-title" itemprop="headline"><a href="%2$s" rel="bookmark">',
            $settings[ 'title_element' ],
            esc_url( get_permalink() )
        );

        $after_title = '</a></' . $settings[ 'title_element' ] . '>';

        if ( apply_filters( 'wpsp_disable_title_link', false, $settings ) ) {
        $before_title = '<' . $settings[ 'title_element' ] . ' class="wp-show-posts-entry-title" itemprop="headline">';
        $after_title = '</' . $settings[ 'title_element' ] . '>';
        }

        if ( $settings[ 'include_title' ] ) {
        the_title( $before_title, $after_title );
        }

        do_action( 'wpsp_after_title', $settings );

        echo wp_show_posts_standort();

        ?>
        </div>
            </header><!-- .entry-header -->

After that, I added the link to open the actual modal content below inside another section (see Open Modal link):

if ( 'excerpt' == $settings[ 'content_type' ] && $settings[ 'excerpt_length' ] && ! $more_tag && 'none' !== $settings[ 'content_type' ] ) : ?>
    <div class="wp-show-posts-entry-summary" itemprop="text">
    <div class="profilinhalt">
    <?php echo wp_show_posts_merkmal(); ?>

    <p><a href="#ex1" rel="modal:open">Open Modal</a></p>

        <?php wpsp_excerpt( $settings[ 'excerpt_length' ] ); ?>
    </div><!-- .entry-summary -->
<?php elseif ( ( 'full' == $settings[ 'content_type' ] || $more_tag ) && 'none' !== $settings[ 'content_type' ] ) : ?>
    <div class="wp-show-posts-entry-content" itemprop="text">
        <?php the_content( false, false ); ?>
        </div>

    </div>

The problem I am now facing is, its not working. The css loads. And as far as I am aware the jquery files too, but I tested and tested and seem to be missing some simple error I'm not recognizing. I am looking on here for input to find the missing piece of the puzzle. Maybe Wordpress needs some special input to load the files, I'm not sure anymore.

I am grateful for any help or any pointers I can get.

Answer 1

First, make sure that your javascript files are loading correctly. Open Developer Tools while on the page (you can right click and select Inspect).

Under the Elements tab, do a search for your javascript files, to make sure they are being enqueued on the page.

Also check the Console tab for any javascript errors.

Is there a specific reason you're dequeueing jQuery and enqueuing your own version? WordPress comes with jQuery already included, all you need to do is add it as a dependency to your script file.

Also your registering code needs some things changed:

1. You can do everything in the wp_enqueue_scripts hook for frontend (admin_enqueue_scripts is for backend)
2. When specifying dependencies you should get in the habit of specifying them in an array
3. I recommend using a unique slug for your script/style names, as modal may be registered by other plugins/themes and could be causing issues (i changed to mymodal)

function my_custom_enqueue_scripts() {

    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', array(), '3.1.1', true );
    wp_register_script( 'mymodal', get_template_directory_uri() . '/js/jquery.modal.min.js', array( 'jquery' ), '', true );
    wp_register_style( 'mymodal', get_template_directory_uri() . '/jquery.modal.min.css' );
    if ( is_page( 'kundenprofile' ) ) {
        wp_enqueue_script( 'mymodal' );
        wp_enqueue_style( 'mymodal' );
    }
}

add_action( 'wp_enqueue_scripts', 'my_custom_enqueue_scripts' );

You can also change the priority at when your hook is called, by adding it after the function:

add_action( 'wp_enqueue_scripts', 'my_custom_enqueue_scripts', 1 );

10 is the default when you do not specify one

I also recommend JUST FOR TESTING to remove the check with is_page to make it enqueue on every page, and if you do, and it works, but when you put that code back it doesn't ... you know the issue is with that function checking the page (although it's ALWAYS good dev practices to check the page before enqueueing a script .. i wish all devs did this, but they do not)