How to open a modal from a different file

Question

I have a bunch of modals inside my index.html file and in order to make it more readable I would like to put the modal content in a new file but for some reason it doesn't open my modal when doing so.

Here is the code of my index.html file

I have here a card and when clicking on it the modal should open this is on my index.html file

<div class="card mb-3">
    <div class="card-body pointer" style="background: rgb(40,99,173);
background: linear-gradient(45deg, rgba(40,99,173,1) 8%, rgba(35,49,212,1) 56%);" id="modalActivate"   data-toggle="modal" data-target="/Dapps/dapps.html/#defi">
      <h5 class="card-title">DeFi</h5>
      <p >Best DeFi platforms </p>
    </div>
  </div>

the data-target="Dapps/dapps.html/#defi" should open this modal at "Dapps/dapps.html/#defi"

<!-- Modal -->
<div class="modal fade right" id="defi" tabindex="-1" role="dialog" aria-labelledby="exampleModalPreviewLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalPreviewLabel">DeFi</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <table id="wallet" class="table-responsive table-striped table-bordered table-sm" cellspacing="-1" width="100%">
      <thead>
        <tr>
          <th  class="th-sm">Logo</th>
          <th class="th-sm">Name  </th>
          <th class="th-sm">Type</th>

        </tr>
      </thead>
      <tbody>
        <tr class='clickable-row pointer' data-href='https://makerdao.com/'>
          <td ><center><img src="images/makerdao.png" style="width:64px;"></center></td>
          <td>Makerdao</td>
          <td>Digital currency that can be used by anyone, anywhere, anytime.</td>
        </tr>
        <tr class='clickable-row pointer' data-href='https://fulcrum.trade/'>
          <td><center><img src="images/fulcrum.png" style="width:64px;"></center></td>
          <td>Fulcrum</td>
          <td>Fulcrum is a powerful DeFi platform for tokenized lending and margin trading.</td>
        </tr>
        <tr class='clickable-row pointer' data-href='https://compound.finance/'>
          <td><center><img src="images/compound.png" style="width:64px;"></center></td>
          <td>Compound</td>
          <td>Compound is an algorithmic, autonomous interest rate protocol built for developers, to unlock a universe of open financial applications.</td>
        </tr>
        <tr class='clickable-row pointer' data-href='https://www.synthetix.io/'>
          <td><center><img src="images/synthetix.png" style="width:64px;"></center></td>
          <td>Synthetix</td>
          <td>A protocol for trading synthetic assets on Ethereum</td>
        </tr>
        <tr class='clickable-row pointer' data-href='https://instadapp.io/'>
          <td><center><img src="images/instadapp.png" style="width:64px;"></center></td>
          <td>InstaDapp</td>
          <td>Seamlessly manage, optimize and deploy your assets to get the best returns across protocols.</td>
        </tr>
      </tbody>
    </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal -->

but unfortunately it isn't working- the modal only opens when I have it also in my index.html file. How can I fix this so I can have a separate file for my modal content?

Does this answer your question? [Bootstrap 4 with remote Modal](https://stackoverflow.com/questions/34763090/bootstrap-4-with-remote-modal) — imvain2, May 22 '20 at 20:00
It cant be done in just plan HTML and bootstrap, you will need to use a framework of some sort, maybe a client-side templating or a data binding framework. Laravel is a good one for this. — whisk, May 22 '20 at 20:43
im not using php and i dont want to use it- how can i do it with javascript? — codedo, May 22 '20 at 20:51
You don't need server side. Per those answers, you can use jquery to load HTML into the target div. You need to change target to a div with a blank modal in your code, then have remote as the url of your modal html. — imvain2, May 22 '20 at 21:07
Your use of `.card` suggests you're using Bootstrap 4? There is no mention in the docs of loading remote content in modals in the Bootstrap 4 docs, however, the correct way to link to an anchor on another page is `/Dapps/dapps.html#defi`, not what you have (not no slash between `html` and the `#`). I have no idea if it is supported, but if it is, that would be the right way to reference your content. — Don't Panic, May 23 '20 at 00:05

How to open a modal from a different file

0 Answers0