[Resolved] Multiple modals on same page not working

[Author]

Posts

[martinH-10]

I have button in each Loop for opening modal.

<div class="prace-vypis">
  <div class="row">
	<div class="col-sm-8"><p class="vypis-title"><a href="[wpv-post-url]" target="_blank" title="Prohlédnout pracovní pozici: [wpv-post-title]" rel="noopener noreferrer">[wpv-post-title]</a></p>
<p class="vypis-subtitle">[wpv-post-taxonomy type="uvazek" format="name"] / [wpv-post-taxonomy type="obor" format="name"] / [wpv-post-taxonomy type="lokalita" format="name"]</p></div>
    <div class="col-sm-4"><p class="vypis-time">Přidáno: [wpv-post-date format="j. F"]</p></div>
</div>
<div class="row">
	<div class="col-sm-8"><p class="vypis-excerpt">[wpv-post-excerpt format="noautop"]</p></div>
	<div class="col-sm-4"><p class="vypis-button"><button type="button" class="btn btn-success" data-toggle="modal" data-target="#nahled-inzeratu-[wpv-post-id]" title="Náhled pracovní pozice: [wpv-post-title]">Náhled <span class="glyphicon glyphicon-search"></span></button></p></div>
</div>
</div>

<!-- Modal -->
<div id="#nahled-inzeratu-[wpv-post-id]" class="modal fade popup-inzerat" tabindex="-1" role="dialog" aria-labelledby="nahledinzeratu-[wpv-post-id]" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="nahledinzeratu-[wpv-post-id]">[wpv-post-title]</h4>
      </div>
      <div class="modal-body">
        <div class="row">
	<div class="col-sm-8">[wpv-post-body view_template="None"]</div>
          <div class="col-sm-4 pop-kontakt"><h3>Máte zájem?</h3>
          <p>Napište nám:<br>[wpv-post-author format="meta" meta="user_email"]</p>
          <p>Zavolejte nám:<br><i class="material-icons">phone</i> [types usermeta='tel' user_is_author='true'][/types]</p>
          <a href="[wpv-post-url]" class="btn btn-primary btn-info">Kontaktní formulář <span class="glyphicon glyphicon-chevron-right"></span></a></div>
</div>
         
      </div>
      <div class="modal-footer">
        <a href="[wpv-post-url]" title="Prohlédnout pracovní pozici: [wpv-post-title]" class="btn btn-info">Prohlédnout <span class="glyphicon glyphicon-arrow-right"></span></a>
      </div>
    </div>
  </div>
</div>

It always have custom id for each loop item set by post-id. Everything looks fine, but modals dont open. Can you help? You can see it here: hidden link - the green buttons should open modals

[Minesh]

Hello. Thank you for contacting the Toolset support.

well - I see you done mistake with your code.

Please replace the following line of code with your original line of code and it should work:

<!-- Modal -->
<div id="nahled-inzeratu-[wpv-post-id]" class="modal fade popup-inzerat" tabindex="-1" role="dialog" aria-labelledby="nahledinzeratu-[wpv-post-id]" aria-hidden="true">

The issue was you added # with id attribute. The id attribute value should be without hash id="nahled-inzeratu-[wpv-post-id]"

[martinH-10]

My issue is resolved now. Thank you!