Question

我在HTML中有一个常规的bootstrap-modal。我试图用javascript显示/隐藏它，我得到了未定义的函数。

我正在按照引导程序文档说，我仍然在这一行得到未定义的函数：

$("#registermodal").modal('show');

这是我的HTML模式：

<div class="modal fade" id="registermodal" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title" id="registerDevice">Klargjøring</h4>
        </div>
        <div class="modal-body">
            <div id="registerContent" class="form-group">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="Enhetsnavn" class="col-lg-4 control-label">UUID</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" id="uuid" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="AppleID1" class="col-lg-4 control-label">Apple-ID #1</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" id="AppleID1" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="AppleIDPassword1" class="col-lg-4 control-label">Apple-ID Password #1</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" id="AppleIDPassword1" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="AppleID2" class="col-lg-4 control-label">Apple-ID #2</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" id="AppleID2" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="AppleIDPassword2" class="col-lg-4 control-label">Apple-ID Password #2</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" id="AppleIDPassword2" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="SIMpin" class="col-lg-4 control-label">SIM-PIN</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" id="SIMpin" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="losekod" class="col-lg-4 control-label">Låsekod</label>
                        <div class="col-lg-8">
                            <input type="text" class="form-control" id="losekod" placeholder="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="select" class="col-lg-2 control-label">Lokation</label>
                        <div class="col-lg-10">
                            <select size="6" class="form-control" id="lokationSelect">
                                <option value="Phone">Phone</option>
                                <option value="PDA">PDA</option>
                                <option value="Phone">Phone</option>
                                <option value="PDA">PDA</option>
                                <option value="Phone">Phone</option>
                                <option value="PDA">PDA</option>
                                <option value="Phone">Phone</option>
                                <option value="PDA">PDA</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-success" data-dismiss="modal" onclick="performKlargjoring()">Klargjøring</button>
        </div>
    </div>
</div>
</div>

Answer 1

如果您多次定义了jquery库，则可能会收到未定义函数的一个原因。

<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>

<div class="modal fade" id="registermodal" aria-hidden="true">
...
...
</div>

<script src="/Scripts/jquery-1.10.2.min.js"></script>

引导程序库应用于第一个jquery库，但是当你重新加载jquery库时，原始的引导程序加载会丢失（模态函数在引导程序中）。

此问题的一个常见原因是在Web应用程序中包含部分代码块，因为相同的javascript文件引用可能出现在多个位置的完整页面输出中。当您的js定义分散在整个页面中时，即在头部，身体顶部和身体底部（在部分模板中）时，这尤其危险。

Answer 2

我解决了我改变的问题

$(id).modal("show")

到

jQuery(id).modal("show").

Answer 3

在声明自己的js文件之前添加以下脚本标记。这将解决错误。

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

Answer 4

编辑：我添加了一个点击隐藏：DEMO2

DEMO

它没有像你说的那样提供未定义的功能。我建议包装你的$("#registermodal").modal('show');

在$(document).ready(function(){});

中

如果这不起作用（或者你已经这样做了），我建议你在</body>之前添加你的js脚本（或链接）

最后一种情况，请确保您的HTML页面上有bootstrap.min.js和jquery。

Answer 5

只需将id添加到关闭按钮并触发点击它，使用jquery工作得很好..

Answer 6

尝试：

$("#registermodal").modal();

Answer 7

停止使用modal js功能！（我认为有些库问题正在进行中）

您可以通过将数据切换，数据目标元素添加到模态按钮来打开模态。如此简单的点击按钮就会自动打开模态，而不需要js触发。

如果你想以编程方式打开模态，只需触发点击模式按钮，它将打开它。（未经测试）

要关闭模态，只需在现有关闭按钮中添加一个id，并在需要关闭时使用jQuery触发单击它。有用！（测试）

bootstrap3 modal js undefined function

7 个答案: