Question

我在html中构建了一个页面，其中有一个模式，使用jQuery和Bootstrap点击按钮。当我在桌面上有文件（css，js，fonts，index.html）时，一切都按预期工作。

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

据我所知，该页面看起来有90％相似。 Bootstrap JS和CSS肯定是加载的，因为我有造型和折叠导航栏。 jQuery肯定是加载的，因为我在控制台中有一个$ hook（我看到文件被加载到资源中）。

我没有任何控制台错误（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资源。此外，我已检查快递是否正确提供文件和所有适当的文件到位。

Answer 1

一些修复

要触发模态，您需要包含链接或按钮。触发器元素的标记可能如下所示：

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

请注意，link元素有两个自定义数据属性：data-toggle和data-target。切换告诉Bootstrap要做什么，目标告诉Bootstrap要打开哪个元素。因此，无论何时单击此类链接，都会出现ID为“mymodal”的模式。

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

并从modal

中删除<div class="modal-dialog modal">课程

Fiddle

莫代尔不会出现快递应用

1 个答案: