未捕获的 TypeError：$(...).modal 不是 Codeigniter 中的函数

Question

您好，我正在尝试在页面加载时加载引导模式。

我已经参考了这个链接：

Modal error - Uncaught TypeError: undefined is not a function modal

Bootstrap : TypeError: $(…).modal is not a function

TypeError: $(…).modal is not a function with bootstrap Modal

所以根据他们，我将我的脚本安排为：

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>    
<script src="<?php echo site_url('js/bootstrap.min.js'); ?>"></script>      
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="<?php echo site_url('assets/js/jquery-1.11.1.min.js');?>"></script>
<script src="<?php echo site_url('assets/js/jquery.backstretch.min.js');?>"></script>
<script src="<?php echo site_url('assets/js/retina-1.1.0.min.js');?>"></script>
<script src="<?php echo site_url('assets/js/scripts.js');?>"></script>

我的模态代码是这样的：

<div class="modal hide fade" id="myModal">
    <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">Subscribe our Newsletter</h4>
            </div>
            <div class="modal-body">
        <p>Subscribe to our mailing list to get the latest updates straight in your inbox.</p>
                <form>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Name">
                    </div>
                    <div class="form-group">
                        <input type="email" class="form-control" placeholder="Email Address">
                    </div>
                    <button type="submit" class="btn btn-primary">Subscribe</button>
                </form>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">
    $(window).load(function(){
        $('#myModal').modal('show');
    });
</script>

但我仍然收到关于我的模式未加载的错误。有什么可能的解决方案？我的脚本应该如何以正确的方式调用

Answer 1

如果你正确导入 bootstrap.min.js，你就不需要 jquery-ui。

在这个fiddle 中，您可以找到仅具有引导程序依赖项的模态函数版本

Answer 2

请注意，虽然您包含了 jQuery 和 jQueryUI，但您随后添加了另外两个版本的 jQuery jQueryUI（总共 4 个），然后取代了 jQueryUI 方法。你只需要一个对 jQuery 的引用，所以删除那些多余的。试试这个：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>    
<script src="<?php echo site_url('js/bootstrap.min.js'); ?>"></script> 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="<?php echo site_url('assets/js/jquery.backstretch.min.js');?>"></script>
<script src="<?php echo site_url('assets/js/retina-1.1.0.min.js');?>"></script>
<script src="<?php echo site_url('assets/js/scripts.js');?>"></script>

另外请注意，jQueryUI 和 Bootstrap 都有名为 modal() 的方法，并且可能相互冲突。我强烈建议您只使用其中一个库。我个人建议通过 jQueryUI 使用 Bootstrap。