Emoji modal popup works on localhost but not on server side

294 Views Asked by At

I built a site in VS Code using Bootstrap and I coded in HTML for emojis to popup once an icon is clicked on, utilizing bootstraps modals. When viewed on my localhost everything looks great and works great. However, when I upload the file to InMotion Hostings server the the modals no longer work and my icon to access the modals is now not visible. However, when I hover my mouse over the area where the icon should be the mouse responds but nothing happens. InMotion is trying to blame it on the variables I'm using, even though this worked on their servers for the past week and stopped working today. A few days ago I did add coding to my .htaccess file to remove the extension of each page and I did change the reference to the index page to "/" so index will not show once on the Home page. This is the coding I'm using for the modal popups: ...

<!-- Emoji Navbar First -->
<a class="navbar bg-primary sticky-top emoji" href="#emoji" role="button"
    data-toggle="collapse"></a>

<!-- Emoji Navbar Second -->
<a class="navbar bg-primary sticky-top emoji" href="#emoji" role="button"
data-toggle="collapse"><i class="fas fa-upload"></i></a>

<div class="collapse" id="emoji">
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-md-3"><img src="img/emoji/panda.gif" alt="" 
                class="w-100"></div>
            <div class="col-sm-6 col-md-3"><img src="img/emoji/poo.gif" alt="" 
                class="w-100"></div>
            <div class="col-sm-6 col-md-3"><img src="img/emoji/unicorn.gif" alt="" class="w-    
               100"></div>
            <div class="col-sm-6 col-md-3"><img src="img/emoji/chicken.gif" alt="" class="w-
               100"></div>
        </div>
    </div>
</div>

<!-- Modal Popup -->
<div class="modal fade" id="modal1">
    <div class="modal-dialog">
        <img src="img/emoji/unicorn.gif" alt="" class="w-100">
    </div>
</div>

<div class="modal fade" id="modal2">
    <div class="modal-dialog">
        <img src="img/emoji/poo.gif" alt="" class="w-100">
    </div>
</div>

...

Does anyone know why my hosting server is not rendering this code? I really hope someone responds since I am completely stumped on this issue. Any help is appreciated.

0

There are 0 best solutions below