Return to previous page

Bootstrap modal does not work - by sirio

This topic has 2 replies, 2 voices, and was last updated 6 years, 6 months ago ago by Olga Barlow

sirio

Participant

October 6, 2017 at 12:25

Hy,
I’m triyng to set up a bootstrap modal in the product page but something is not working properly. I don’t know if it is a problem with the code I used or with the template files. Here is a sample code (the content is not important). Can You tell me if I did something wrong.
Thanks in advance.

<!– Button trigger modal –>
<button type=”button” class=”btn btn-primary” data-toggle=”modal” data-target=”#exampleModal”>
Launch demo modal
</button>
<!– Modal –>
<div class=”modal fade” id=”myModal” tabindex=”-1″ role=”dialog” aria-labelledby=”exampleModalLabel” aria-hidden=”true”>
<div class=”modal-dialog” role=”document”>
<div class=”modal-content”>
<div class=”modal-header”>
<h5 class=”modal-title” id=”exampleModalLabel”>Modal title</h5>
<button type=”button” class=”close” data-dismiss=”modal” aria-label=”Close”>
<span aria-hidden=”true”>×</span>
</button>
</div>
<div class=”modal-body”>
…
</div>
<div class=”modal-footer”>
<button type=”button” class=”btn btn-secondary” data-dismiss=”modal”>Close</button>
<button type=”button” class=”btn btn-primary”>Save changes</button>
</div>
</div>
</div>
</div>

Please, contact administrator
for this information.

#174401 Copied

1 Answer

Olga Barlow

Support staff

October 9, 2017 at 13:54

Hello,

1) data-target=”” points to the id of the modal but in your code you have used id different than data-target
2) we use different modal windows in our theme and did not include default bootstrap modal.js. So, you need to include the modal.js file into child theme and enqueue it.

Regards

#174565 Copied
Viewing 2 results - 1 through 2 (of 2 total)