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

muneebify
New Member
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>

JoesIdeas
Shopify Expert
1302 118 338

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).

Founder of Speed Boostr (Shopify optimization experts, theme customization, custom app development).
Creator of Shopify Analyzer (first performance analysis tool for Shopify sites, free for the Shopify community).
Creator of Order Automator (auto tag orders and customers + auto fulfillment + more automations).
More apps: Theme Scientist (A/B testing), Tip Jar (add a tip button), File Optimizer (optimize CSS, JS, Liquid).
0 Likes
muneebify
New Member
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...

0 Likes
ritsybitsy
Tourist
5 0 10

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?