Search code examples
jqueryhtmltwitter-bootstrapmodal-dialogblueimp

Bootstrap Modal won't trigger on MOBILE chrome, works fine on mobile firefox/ie


This is a day I thought I would never see, Chrome seems to be breaking whenever I load this page and the modals (click on images) are not triggering. Note: This is a MOBILE only problem. Problem Page

It works fine on Firefox/IE (Mobile), which is the other way around usually. The Racing/Business pages are working fine so I am leaning towards it not being a bug but a user error.

The Gallery I am using is blueimp

This is my code for my modals:

     <a href="../assets/images/marine/pm61.jpg" title="Marine" data-gallery>
        <img src="../assets/images/marine/pm61.jpg" alt="Marine">
    </a>


<div id="blueimp-gallery" class="blueimp-gallery">
    <!-- The container for the modal slides -->
    <div class="slides"></div>
    <!-- Controls for the borderless lightbox -->
    <h3 class="title"></h3>
    <a class="prev">&#60;</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
    <!-- The modal dialog, which will be used to wrap the lightbox content -->
    <div class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" aria-hidden="true">&times;</button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body next"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-left prev">
                        <i class="glyphicon glyphicon-chevron-left"></i>
                        Previous
                    </button>
                    <button type="button" class="btn btn-primary next">
                        Next
                        <i class="glyphicon glyphicon-chevron-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

Edit: After testing, it seems like NO link is working (not even the footer watermark links)

Please advise,

Thank you.

Robert


Solution

  • After testing the page on a Nexus 4 running Chrome, I've found the page to work perfectly.

    Screenshot showing working Modal in Chrome on Nexus 4