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

Highlighted
New Member
2 0 0

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>

0 Likes
Highlighted
Shopify Expert
884 72 208

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 and dev agency).
Creator of Theme Scientist (A/B testing app).
Creator of Order Automator (app that auto tags + fulfills orders, send emails).
Creator of Tip Jar (add a tip button to your store).
Creator of Shopify Analyzer (first performance analysis tool specifically for Shopify sites).
My team also builds custom apps and automated solutions.
Enjoy the adventure!
0 Likes
Highlighted
New Member
2 0 0

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