Question

我正在为朋友的教会定制一个引导模板。只是简单的事情，所以他们有网络存在。我正在创建一个联系表单，我希望它是一个模态，用户输入他们的信息然后发送他们的评论。但是，我遇到的问题是模态不会显示输入的模态标题或标签。我完全感到困惑，因为我实际上从先前使用bootstrap构建的网页中复制了完全相同的代码。我只修改了一些东西（拿走了一些输入组并更改了标题等），但没有任何东西应该影响功能。

以下是有关功能的链接：www.rawgit.com/znagatani/schedule_me/master/index.html。

以下是该模式的标记：

<button class="btn btn-success" id="cta" type="button" data-toggle="modal" data-target="#sign-up">Let's Go!</button>
<div class="modal" id="sign-up">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">X</button>
                 <h4 class="modal-title">Sign Up</h4>

            </div>
            <div class="modal-body">
                <div class="input-group">
                    <label for="first-name">First Name</label>
                    <input type="text" class="form-control modal-sign" placeholder="Goku" />
                </div>
                <div class="input-group">
                    <label for="last-name">Last Name</label>
                    <input type="text" class="form-control modal-sign" placeholder="Son" />
                </div>
                <div class="input-group">
                    <label for="text">Valid Email</label>
                    <input type="email" class="form-control modal-sign" placeholder="kakarot7z@example.com" />
                </div>
                <div class="input-group">
                    <label for="username">Username</label>
                    <input type="text" class="form-control modal-sign" placeholder="ssjssgWarrior" />
                </div>
                <div class="input-group">
                    <label for="password">Password</label>
                    <input type="password" class="form-control modal-sign" placeholder="kamehamehax10" />
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">Close</button>
                <button class="btn btn-success">Create Account</button>
            </div>
        </div>
    </div>
</div>

然后这里是教会的链接：www.rawgit.com/znagatani/cross_bootstrap/contact-modal/index.html

这是标记：

<!-- Button trigger modal -->
<button type="button" class="btn btn-contact btn-lg" data-toggle="modal" data-target="#contact-us">Contact Us</button>
<!-- Modal -->
<div class="modal fade" id="contact-us">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
                 <h4 class="modal-title">Sign Up</h4>

            </div>
            <div class="modal-body">
                <div class="input-group contact-input">
                    <label for="first-name">First Name</label>
                    <input type="text" class="form-control modal-sign" placeholder="John" />
                </div>
                <div class="input-group contact-input">
                    <label for="last-name">Last Name</label>
                    <input type="text" class="form-control modal-sign" placeholder="Doe" />
                </div>
                <div class="input-group contact-input">
                    <label for="text">Valid Email</label>
                    <input type="email" class="form-control modal-sign" placeholder="example@example.com" />
                </div>
                <div class="form-group">
                    <label for="comment">Comment:</label>
                    <textarea class="form-control" placeholder="What's your question, comment, or concern?"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">Close</button>
                <button class="btn btn-success">Send it!</button>
            </div>
        </div>
    </div>
</div>

您可以看到第一个正确显示标签和标题;第二个没有。为什么是这样？？如果答案在模态标记中不是明显的，那么模板可能会覆盖bootstrap的javascript。

如果已经问过这个问题，我很抱歉......我四处搜索，没有找到任何回答这个具体问题的内容。非常感谢你！

Bootstrap 3模态不会显示模态标题或输入标签

0 个答案: