Quiz: A Small Taste of Interactivity

Intro to HTML & CSS >> Bootstrap and Other Frameworks >> Quiz: A Small Taste of Interactivity

 

I could not get the modal to work with the code provided within this exercise.

Try checking your page within Chrome Developer Tools. Under the “Console” tab, it should mention if your page load had errors. Mine were that my Jquery version was 3.0.0, which the Bootstrap Modal only works with Jquery versions BELOW 3.0.0. (as of today, June 18, 2016). I realized after using a lower version of Jquery, at the end of the day, my js/bootstrap.min.js file was the culprit. The button would display and be clickable, but, when clicked, no modal showed up.

So I used code from w3schools.com Bootstrap Modals as a model. I suggest checking the page out. It is short and sweet and to the point. Although it says you need to have a button or a link, what I think it means is a link to an image using <img …..>. You also get to “Try it Out” within their page for even more clarity.

Here is their code:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

      <!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">

Some text in the modal.</div>
<div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div>
</div>
</div>
</div>
</div>
</body>
</html>

I could not get the image to load within the modal. I am guessing the version of Bootstrap I used from w3schools does not support images in the modals? Not sure. Here is what my code looked like at the end, with a clickable modal and custom photo:

Screen Shot 2016-06-16 at 2.32.33 PM.png

 

And the code to go with it:

 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

      <!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">

Some text in the modal.</div>
<div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div>
</div>
</div>
</div>
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/The_Parthenon_in_Athens.jpg/260px-The_Parthenon_in_Athens.jpg" class="img-responsive btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">

  <!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

      <!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
          <!--<button type="button" class="close" data-dismiss="modal">&times;</button>-->
<h4 class="modal-title" id="modal-title">Modal Header</h4>
</div>
<div class="modal-body">

Some text in the modal.</div>
<div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div>
</div>
</div>
</div>
</div>
</body>
</html>
Advertisements

Author: ajoannaproject

Studying Udacity's Full Stack Web Developer program and passing on my improvements, hints, hacks, and updates to other students via ajoannaproject.wordpress.com.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s