Question

我几天来一直在敲打这个。

我有一个基于Bootstrap 3构建的小型Web应用程序。在navbar-right div中，我有“登录”和“注册”按钮。在台式机和平板电脑上，当用户点击/点击其中一个按钮时，会出现相应的模式对话框。

然而，在手机上，当用户与按钮交互时，似乎没有任何事情发生。我的消息来源如下。

（来自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>

（注册模式的前几行代码段）

    <div id="signup-modal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">

Answer 1

I have no idea why it won't open the modal unfortunately, had the same issue myself and tried researching it.

My modal works fine on desktop all the time, but I find that when you link to it like this:

<a href="#myModal" data-toggle="modal">Modal</a>

It opens after 3 clicks on mobile (only when not in the navbar-right). Sometimes it opened after 1, but feels buggy.

However, when trying it like this:

<button class="btn btn-xl btn-navbar" data-toggle="modal" data-target="#myModal">Modal</button>

It will work everytime. Instantly, and with no delay. It fires everytime when using a button.

What I did for this particular occasion, was use a button, and a custom class, and style it appropriately, as I didn't want it to look like a button in the navbar, I wanted it to function like any other link.

Works like a charm, give it a go.

从navbar-right调用时，Bootstrap模态不会出现在移动设备上

1 个答案: