Bootstrap modal implementation in wordpress codex

Question

I'm having a little hard time here implementing a modal view to display the post content rather than sending the user to another page.

I have this

function get_grid_archive_theme( $post, $archive_template = null ) {
$archive_template    = isset( $archive_template ) ? $archive_template : get_product_listing_template();
$return              = '';
if ( $archive_template == 'grid' ) {
    $product_id          = $post->ID;
    $excerpt             = get_the_excerpt( $product_id );
    $post_content        = get_the_content( $product_id );
    $image_id            = get_post_thumbnail_id( $product_id );
    $thumbnail_product   = wp_get_attachment_image_src( $image_id, 'classic-grid-listing' );
    $product_name        = get_product_name();
    if ( $thumbnail_product ) {
        $img_class[ 'alt' ]      = $product_name;
        $img_class[ 'class' ]    = 'classic-grid-image';
        $image                   = wp_get_attachment_image( $image_id, 'classic-grid-listing', false, $img_class );
    } else {
        $url     = default_product_thumbnail_url();
        $image   = '<img src="' . $url . '" class="classic-grid-image default-image" alt="' . $product_name . '" >';
    }
    $archive_price           = apply_filters( 'archive_price_filter', '', $post );
    $classic_grid_settings   = get_classic_grid_settings();
    $row_class               = get_row_class( $classic_grid_settings );
    $return                  = '<div class="col-xs-12 col-sm-6 col-md-3 product-' . $product_id . ' classic-grid ' . $row_class . ' ">';
    $return .= '<a data-toggle="modal" data-target="#' . $product_id . ' " href="#">';
    //$return .= '<div style="background-image:url(\'' . $url . '\');" class="classic-grid-element"></div>';
    $return .= '<div class="classic-grid-image-wrapper"><div class="pseudo"></div><div class="image">' . $image . '</div></div>';
    $return .= '<div class="excerpt-cnt"><div class="excerpt-text">' . $excerpt . '</div></div><h3 class="product-name">' . $product_name . '</h3>' . $archive_price;
    if ( $classic_grid_settings[ 'attributes' ] == 1 && function_exists( 'product_attributes_number' ) ) {
        $attributes_number = product_attributes_number();
        if ( $attributes_number > 0 && has_product_any_attributes( $product_id ) ) {
            $max_listing_attributes  = apply_filters( 'max_product_listing_attributes', $classic_grid_settings[ 'attributes_num' ] );
            $return .= '<div class="product-attributes">';
            $a                       = 0;
            for ( $i = 1; $i <= $attributes_number; $i++ ) {
                $attribute_value = get_attribute_value( $i, $product_id );
                if ( !empty( $attribute_value ) ) {
                    $return .= '<div><span class="attribute-label-listing">' . get_attribute_label( $i, $product_id ) . ':</span> <span class="attribute-value-listing">' . get_attribute_value( $i, $product_id ) . '</span> <span class="attribute-unit-listing">' . get_attribute_unit( $i, $product_id ) . '</span></div>';
                    $a++;
                }
                if ( $a == $max_listing_attributes ) {
                    break;
                }
            }
            $return .= '</div>';
        }
    }
    $return .= '</a>';
    $return .= apply_filters( 'classic_grid_product_listing_element', '', $product_id );
    $return .= '</div>';

}
    $return .= '<div id="' . $product_id . ' " class="modal" role="dialog">';
    $return .= '<div class="modal-dialog"><div class="modal-content">';
    $return .= '<div class="modal-header">';
    $return .= '<h4 class="modal-title">' . $product_name .'</h4>';
    $return .= '</div>';        
    $return .= '<div class="modal-body">';
    $return .= '<p>' . $post_content .'</p>';
    $return .= '</div>';        
    $return .= '<div class="modal-footer">';
    $return .= '</div>';            
    $return .= '</div></div>';
    $return .= '</div>';
return $return;
}

This code extracts a series of posts excerpts and displays them in a 4 column layout As the picture below depicts

Each one can be clicked and it will show the content of that post in a modal. Well the thing is, it just doesn't but the modal is loaded in the DOM because when I inspect the code there are no JS errors, and the modals are shown in the HTML but still as display:none;. If I click that off or change it to block manually in the web-dev tool the modal shows.

Bootstrap is loaded in the site too. What am I missing? Why doesn't the data-target toggle the display from none to block?

Answer 1

I think there is just a small space problem in your code, in the line below.

$return .= '<div id="' . $product_id . ' " class="modal" role="dialog">';

Remove the space before the close of id attribute, as given below.

$return .= '<div id="' . $product_id . '" class="modal" role="dialog">';

I hope this will help!