0

I do not know what I am doing wrong. The modal is not appearing and I am not sure what I am doing wrong. I have tried it in jsfiddle and it still does not appear when I load the site. Whatever help will be appreciate. 

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>YesICan</title>
<meta name="description" content="Hello World">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

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

</head>

<body>

<header>
    <div class="jumbotron">
        <div class="container">
            <h1>Hello World</h1>
            <h3>Modals in Bootstrap</h3>
        </div> 
    </div> 
</header>

<div class="container">
<!--<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-1">Activate the button</button>-->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                 <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h3 class="modal-title" style="text-align:center">Safety Warning</h3>
                 </div>
                 <div class="modal-body">       
                     <p style="text-align:center"> Your computer use can be monitored by others! Consider using a public computer or a friend's computer. Please view more computer safety tips or escape to Google. Then more computer safety tips linked to a page with details about browser history, cache, search history, etc. and escape to Google linked to Google.</p>
                     <p style="text-align:center"> To learn more how to computer safety, click the following link: <br><a href="#">Safety Tips</a></br></p>
                     <!--Wording can be better just for the meantime-->
                    <p style="text-align:center"> If you are not safe, click the following link: <br><a href="http://www.google.com">Get Me Out of Here!</a></br></p>  
                 </div>

                 <div class="modal-footer">
                    <a href="" class="btn btn-default" class="btn pull-middle" data-dismiss="modal" class="pagination-centered">Close</a>
                 </div>
            </div>
        </div>
    </div>
</div>


<footer>
    <div class="container">
        <hr>

        <p>
            <small><a href="http://facebook.com/askorama">Like me</a> On facebook</small></p>
        <p> <small><a href="http://twitter.com/wiredwiki">Ask whatever </a> On Twitter</small></p>
        <p> <small><a href="http://youtube.com/wiredwiki">Subscribe me</a> On Youtube</small>

        </p>
    </div> <!-- end container -->
</footer>

<!-- Latest compiled and minified JavaScript -->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

Roberto Flores
  • 775
  • 2
  • 12
  • 46

3 Answers3

1

If you look at the console, you will notice undefined is not a function. This is in reference to you trying to call $ in the following before jQuery is loaded in the <head> tag.

$(window).load(function(){
    $('#myModal').modal('show');
});

Then you have jQuery at the end of the page. If you were to put the jQuery reference in your head above your script tag, you should be good to go.

Notes:

Doesn't make a HUGE difference but it's more accepted to have your javascript loading at the bottom of the page. I've found it easier to debug or avoid such things. Especially when you are relying on 3rd party libs such as jQuery.

Unless you really need to wait for images and such on the page to load, you should use the $(document).ready() event or the cleaner $(function () {});

More info on the differences can be found Here.

Community
  • 1
  • 1
technicallyjosh
  • 3,511
  • 15
  • 17
0

You need to include the bootstrap javascript (and jQuery) javascript files for this to work.

You can load bootstrap.js from here

And a list of jQuery library's can be found here

Cjmarkham
  • 9,484
  • 5
  • 48
  • 81
-1

First, you are missing a closing div tag for the myModal div.

Then you are to be sure you have your jQuery libraries all loaded up (bootstrap.js and jquery).

Mr.Web
  • 6,992
  • 8
  • 51
  • 86