How to get this to work with WPBakery?

@eddie_e You would add the modal-ready ID to the outermost wrapping DIV.

A working example is here (3rd link): https://wp-post-modal.allureprojects.com/

Always check for console errors if something is not working.

Hi , thanks for your response but I’ve tried to add this at every possible element i.e. the row, coloumn. I also tried to wrap it around the code as shown below:

‘<div class=”modal-ready”>[vc_row][vc_column][gem_news_grid news_grid_layout=”3x” news_grid_gaps_size=”42″ news_grid_hover=”zooming-blur” loading_animation=”fade-in” news_grid_items_per_page=”3″ news_grid_hide_date=”1″ news_grid_hide_categories=”1″ news_grid_hide_author_avatar=”1″ news_grid_hide_author=”1″ news_grid_hide_comments=”1″ news_grid_likes=”1″ metro_max_row_height=”380″][/vc_column][/vc_row]</div>’

Also with no joy! My temp blog page is here: https://www.collectivegraphics.com.au/sites/pgop/blog-test/ if this helps uncover why it’s not working!

Many thanks

Ben

You’re adding a “modal-ready” class in the code above. It needs to be an “ID” not a class.

Hi, even with ID, this makes no difference to the outcome.

Many thanks

Ben

You provided the temporary blog page, but please provide the page with the modal-link and also the page you’re trying to link that is a WP Bakery page.

Hi, the temporary blog page for now is the page where I have used the modal-ready id wrapped in a div, so all I want is when I click on the post then the post opens up in a popup box. At the moment it just loads in a normal page. When I go to view page source it shows the id is there, see example below:

‘<div id="modal-ready"><div id="vc_row-5d9bcf27eba3c" class="vc_row wpb_row vc_row-fluid"><div class="wpb_column vc_column_container vc_col-sm-12"><div class="vc_column-inner "><div class="wpb_wrapper"><div class="preloader"><div class="preloader-spin"></div></div> <div class="portfolio-preloader-wrapper"> <div data-per-page="3" data-portfolio-uid="804fcfa" class="portfolio news-grid no-padding portfolio-pagination-normal portfolio-style-justified background-style-transparent title-style-light hover-zooming-blur item-animation-fade-in title-on-page version-default columns-3" data-hover="zooming-blur" > <div class=""> <div class="row" style="margin: -21px;"> <div class="portfolio-set clearfix" data-max-row-height="380"> <div class="portfolio-item pgop col-md-4 col-xs-4 item-animations-not-inited post-hide-categories post-hide-date show-caption-border post-1 post type-post status-publish format-standard has-post-thumbnail category-pgop" style="padding: 21px;" data-default-sort="0" data-sort-date="1567746203"> <div class="wrap clearfix"> <div class="image post-1 post type-post status-publish format-standard has-post-thumbnail category-pgop"> <div class="image-inner"> <picture> <img src="https://www.collectivegraphics.com.au/sites/pgop/wp-content/uploads/2019/09/transparent-thegem-portfolio-justified.png" width="844" height="767" class="attachment-thegem-portfolio-justified" alt="Life Balance: What goes up, must come down… (but will go up again!)" /> </picture> <div class="post-featured-content"><a href="https://www.collectivegraphics.com.au/sites/pgop/life-balance/"> <picture>

Thank

Ben

@eddie_e Your links don’t have a modal-link class. When I added the class, the post opened in the modal without issue.