Modal 不会显示 Express 应用程序

Question

我在 html 中构建了一个页面，其中包含使用 jQuery 和 Bootstrap 单击按钮时出现的模式。当我的桌面上有文件（css、js、字体、index.html）时，一切都按预期工作。

然后当我进入我的 Express 应用程序并为相同的 html 内容创建一个新视图并更新链接以反映我的应用程序中的链接时，我得到了一个有点破损的页面。

据我所知，该页面看起来 90% 相似。 Bootstrap JS 和 CSS 肯定正在加载，因为我有样式和折叠导航栏。 jQuery 肯定正在加载，因为我在控制台中有一个 $ 挂钩（我看到文件正在资源中加载）。

我没有任何控制台错误（js 或 css）并且我知道如果我禁用 CSS 我的内容将位于屏幕中间。

我在另一个网页上尝试了类似的代码，该网页的设置方式完全相同，而且看起来运行良好。有谁知道我不知道的事情或者可以提供帮助吗？

<a href=""><i class="fa fa-envelope fa-2x" data-target="#mymodal" data-toggle="#mymodal"></i><br>SEND TEXT</a>
        <br>

        <!-- insert modal -->
        <div class="modal fade share-modal" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
            <div class="modal-dialog modal">
                <div class="modal-content">
                <br>
                    <form>
                        <div class="form-group">
                            <input type="text" class="form-control" id="guestphonenumber" placeholder="PLACEHOLDER HERE">  
                        </div><!-- form-group -->

                        <div class="form-group">
                            <select class="form-control">
                                <option>Unlimited</option>
                            </select>
                        </div><!-- form-group -->
                    </form>
                </div>
            </div>
        </div>

我在 SO 和其他一些论坛上搜索了一下。我已确保只包含 bootstrap 资源一次。我还检查了 express 是否正确提供文件并且所有正确的文件都已到位。

Answer 1

几个修复

要触发模式，您需要包含一个 link 或一个按钮。触发器元素的标记可能如下所示：

<a href="#"  
data-toggle="modal" 
data-target="#mymodal">open Modal</a>

请注意 link 元素有两个自定义数据属性：data-toggle 和 data-target。开关告诉 Bootstrap 要做什么，目标告诉 Bootstrap 哪个元素将要打开。因此，每当单击这样的 link 时，就会出现一个 id 为“mymodal”的模态框。

所以在代码中将 data-toggle="#mymodal" 更改为 data-toggle="modal" 并将 data-target="#mymodal" data-toggle="modal" 移动到 <a href="">

并从 <div class="modal-dialog modal">

中删除 modal class

Fiddle

Modal 不会显示 Express 应用程序

Modal won't show up express app

twitter-bootstrap

express

modal-dialog

render