i've been banging head on 1 days.
i have small web application built off of bootstrap 3. within navbar-right div, have "log in" , "sign up" buttons. on desktops , tablets, when user taps/clicks on 1 of these buttons, appropriate modal dialogue appears.
however, on mobile phones, when user interacts buttons, nothing appears happening. source follows.
(snippet navbar div)
<ul class="nav navbar-nav navbar-right"> <li><a data-toggle="modal" data-target="#signup-modal"> <span class="glyphicon glyphicon-user"></span> sign up</a></li> <li><a data-toggle="modal" data-target="#login-modal"> <span class="glyphicon glyphicon-log-in"></span> log in</a></li> </ul> (snippet first few lines of signup modal)
<div id="signup-modal" class="modal fade" role="dialog"> <div class="modal-dialog modal-sm"> <div class="modal-content">
i have no idea why won't open modal unfortunately, had same issue myself , tried researching it.
my modal works fine on desktop time, find when link this:
<a href="#mymodal" data-toggle="modal">modal</a> it opens after 3 clicks on mobile (only when not in navbar-right). opened after 1, feels buggy.
however, when trying this:
<button class="btn btn-xl btn-navbar" data-toggle="modal" data-target="#mymodal">modal</button> it work everytime. instantly, , no delay. fires everytime when using button.
what did particular occasion, use button, , custom class, , style appropriately, didn't want button in navbar, wanted function other link.
works charm, give go.
