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

Question

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

我已经引用了这个链接:

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你可以在你的模态版本中找到一个只有 bootsrap 依赖的函数