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

请注意，虽然你包含jQuery和jQueryUI，然后在 jQueryUI（总共4个）之后添加另外两个版本的jQuery ，然后取代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。

Answer 2

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

在这个fiddle中你可以找到一个只有bootrap依赖的模态的函数

未捕获的TypeError：$（...）。modal不是Codeigniter

2 个答案: