Hi I am trying to load bootstrap modal on page load.

I have referred this links:

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

So As per them I arranged my scripts as:

   <script src=".11.3/jquery.min.js"></script>    
<script src="<?php echo site_url('js/bootstrap.min.js'); ?>"></script>      
<script src=".js"></script>
<script src="//code.jquery/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src=".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>

And My Modal code like this:

<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>

But I am still getting the error on my modal is not being loaded. What can be the possible solution to this? How should be my scripts called in correct way

Hi I am trying to load bootstrap modal on page load.

I have referred this links:

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

So As per them I arranged my scripts as:

   <script src="https://ajax.googleapis./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./jquery-latest.js"></script>
<script src="//code.jquery./ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="https://code.jquery./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>

And My Modal code like this:

<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>

But I am still getting the error on my modal is not being loaded. What can be the possible solution to this? How should be my scripts called in correct way

• javascript
• jquery
• twitter-bootstrap
• bootstrap-modal

• 1 Make sure you have included the jquery ui library. – Aditya Commented Apr 28, 2016 at 8:48
• @Aditya i have included but still its not working – Rajan Commented Apr 28, 2016 at 8:50

2 Answers 2

If you import bootstrap.min.js correctly you don't need jquery-ui.

In this fiddle you can found a functionin version of your modal with only bootsrap dependencies

Note that although you include jQuery and jQueryUI, you then add another two versions of jQuery after jQueryUI (4 in total) which then supercedes the jQueryUI methods. You only need a single reference to jQuery, so remove those extra ones. Try this:

<script src="https://ajax.googleapis./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./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>

Also note that both jQueryUI and Bootstrap have methods named modal() and could be conflicting with each other. I would strongly remend you use only one of those libraries. Personally I would suggest Bootstrap over jQueryUI.