my bootstrap modal pop is not working is not working on shopify store

muneebify
Visitor
2 0 1

hi, 

i am using bootstrap 4 model popup on my shopify store but it does not open when i click on the button of model the screen turns black but model does not show this is the screen shot after clicking on the buttonthis is the screen shot after clicking on the button

below is the code which i use.

 

<!-- 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="exampleModal" 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">&times;</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>

 

 

<script>
function addHeadTag(tag, options) {
let item = document.createElement(tag);
Object.assign(item, options, { async: false });
document.querySelector("head").appendChild(item)
}

function avoidFouc() {
document.body.style.opacity = 1;
}
addHeadTag('link', {
rel: 'stylesheet',
href: 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css',
onload: avoidFouc
});
addHeadTag('script', {
type: 'application/javascript',
src: 'https://code.jquery.com/jquery-3.3.1.slim.min.js'
});
addHeadTag('script', {
type: 'application/javascript',
src: 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js'
});
addHeadTag('script', {
type: 'application/javascript',
src: 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js'
});
addHeadTag('script', {
type: 'application/javascript',
src: 'https://code.jquery.com/jquery-3.5.1.js'

});
</script>

Replies 5 (5)

JoesIdeas
Shopify Expert
2194 201 587

I would debug by checking the console for errors, and inspecting the element. Maybe it's popping up but stuck in display: none (by another CSS rule, or some JS not firing).

• Creator of Order Automator (automate tagging, fulfillment, Amazon, notifications + more)
• Shopify developer for 10+ years, store owner for 7 years
• I also make guides like Shopify Automation Tips and How to Deal with Fraud / Chargebacks
muneebify
Visitor
2 0 1

which method of CSS and js would i use??
i use tailwind CSS , Bootstrap  and even custom js for poping up but facing same problem...

ritsybitsy
Tourist
7 0 12

Hi,

I have the same problem. Using Bootstrap 4 and trying the basic Bootstrap examples from the website (https://getbootstrap.com/docs/4.5/components/modal/). I try them Bootstrap CSS + Jquery + Bootstrap JS have all been correctly installed in my theme.liquid file.

Every time I click a button or link to have the modal dialog box pop up, the background turns translucent black, but the actual window doesn't load. I don't know why the window doesn't load. I also tried using other jquery modal components (https://jquerymodal.com/) and seem to have the same problem.

All my examples work fine when tried outside of Shopify.

I can only assume that somewhere Shopify is overriding the "modal" class and that is causing issues. Any help though would be MUCH appreciated!

Thanks!

to8gal
Tourist
4 0 2

Someone found any solution on this?

gabocles
Shopify Partner
7 0 1

Hi there! This was happening to me as well but with Bootstrap 5.

In my case I have two stylesheets:

  1. The debut theme stylesheet
  2. The bootstrap 5 stylesheet (which I added on top of the previous one).

Because of that, sometimes I have conflicts. So basically, the only thing to do here is to delete the modal styles from the debut theme stylesheet.

I went to the line 4854 and there I got the modal class. I deleted the whole thing and that was it.

Hope that helps.