By liliplanet on

Hi! Probably not super smart here 😅, but please how do I open a modal from a link and not a button?

This is the button code from https://getbootstrap.com/docs/4.0/components/modal/, but just want a text link to open the modal (not a button).

Example: <a href="...">open the modal</a>

<p><button class="btn btn-primary" data-target=".bd-example-modal-lg" data-toggle="modal" type="button">Large modal</button></p>
<div aria-hidden="true" aria-labelledby="myLargeModalLabel" class="modal fade bd-example-modal-lg" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">description</div>
</div>
</div>

Most appreciate any guidance 😁

⋅ Categories: Drupal 8.x

Comments

wombatbuddy’s picture

wombatbuddy commented

If you add the 'id' attribute, then you can create the link like this: 

<a href="#my-modal" data-toggle="modal">Large modal</a>

<div id="my-modal" aria-hidden="true" aria-labelledby="myLargeModalLabel" class="modal fade bd-example-modal-lg" role="dialog" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      description
    </div>
  </div>
</div>
liliplanet’s picture

liliplanet commented

As always, you are so fabulous @wombatbuddy ✨ only now starting the new build, so you know there is a plan coming soon 😉

wombatbuddy’s picture

wombatbuddy commented

The second way is just to use the 'btn-link' class instead of the 'btn-primary':

<button class="btn btn-link" data-target=".bd-example-modal-lg" data-toggle="modal" type="button">Large modal</button>

See https://www.w3schools.com/bootstrap4/bootstrap_buttons.asp

liliplanet’s picture

liliplanet commented

Oh absolutely perfect @wombatbuddy! Thank you 🌷

 <p><button class="btn btn-link" data-target=".bd-example-modal-lg" data-toggle="modal" type="button">Large modal</button></p>

<div aria-hidden="true" aria-labelledby="myLargeModalLabel" class="modal fade bd-example-modal-lg" role="dialog" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">description</div>
</div>
</div>