[Resuelto] Modal window not working in tabs

[Autor]

Mensajes

[poM]

I am trying to:
Click on the Interior design tab then on the View details button on the first item under "Assembly instructions".

Link to a page where the issue can be seen:
enlace oculto

I expected to see:
A modal window including the files to download. This modal window works on the same page without clicking a tab.

Instead, I got:
Nothing

[Nigel]

How are the tabs added?

How have you set up your modals?

I expect the problem is likely related to the tabbed content being hidden at the time you are trying to set up event listeners to trigger the modals, but more details of your set up would help so that we can look at reproducing something similar.

[poM]

Hi,

Tabs are supplied by Divi modules.

My view is set as the following :

<div id="post-[wpv-post-id]" class="et_pb_portfolio_item et_pb_grid_item">
<span class="et_portfolio_image">
[wpv-conditional if="( '[wpv-post-featured-image output="url"]' ne '' )"]
[wpv-post-featured-image size="large" class='projet-thumb']
[/wpv-conditional]

[wpv-conditional if="( '[wpv-post-featured-image output="url"]' eq '' )"]
<img src='/wp-content/themes/Divi-Ultimate/img/placeholder.png' class='shop_catalog'>
[/wpv-conditional]

<span class="et_overlay">
<span class="overlay-content">
[wpv-post-excerpt length="100" more="..."]
[wpv-conditional if="( $(wpcf-brochure-visibilite) ne 'bim' )"]
[wpml-string context="wpv-views"]View details[/wpml-string]
[/wpv-conditional]
[wpv-conditional if="( $(wpcf-brochure-visibilite) eq 'bim' )"]
[wpml-string context="wpv-views"]View object on BIM web site[/wpml-string]
[/wpv-conditional]
</span>
</span>
</span>
<div class="projet-title">[wpv-post-title class='']</div>
[wpv-post-body view_template="brochure-single-modal"]
</div>

Template brochure-single-modal is the following :

<!-- Modal window -->
<div class="modal fade single-brochure et_pb_bg_layout_light" id="[wpv-post-id]-modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">[wpv-post-title]</h4>
</div>
<div class="modal-body">
<div class="one-third">
[wpv-post-featured-image size="medium" class="img-brochure"]
</div>
<div class="two-thirds last">
[wpv-post-body view_template="None"]
[wpv-conditional if="( $(wpcf-brochure-visibilite) eq 'public' )"]
<h5>[wpml-string context="wpv-views"]Downloads:[/wpml-string]</h5>
[wpv-view name="brochure-fichiers" postid="[wpv-post-id]"]
[/wpv-conditional]
[wpv-conditional if="( $(wpcf-brochure-visibilite) eq 'prive' )"]
<h5>[wpml-string context="wpv-views"]Private download[/wpml-string]</h5>
<p style="margin-bottom:20px;">[wpml-string context="wpv-views"]You must have specific privileges to view or download this content.[/wpml-string]</p>
<span class="private-download">[secure_download_msg]</span>
[/wpv-conditional]
</div>

</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">[wpml-string context="wpv-views"]Close[/wpml-string]</button>
</div>
</div>
</div>
</div>

[poM]

I finally fixed it by myself with a bit a custom Javascript.

Thanks for your help.