building modals with form - Building Modals, Custom Forms, and Flexible Video

Question

Can anyone please help? I am so stuck on getting this form modal to show up. Exactly worked perfectly up to time 4.40. When I preview and click the button, instead of the popup, a black bar in the upper right corner shows a slow loading, and then the next div slide in the carousel! Then the button disappears, the black bar looks like a pause button, and when the first div slides back in, the button reappears. What the heck is going on?? This is my code from Visual Studio Code.

``<!DOCTYPE html>

<head> <meta charset="utf-8"> <title>Foundation 4</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <title>Foundation 4</title>

</head> <body>

<div class='contain-to-grid'> <nav class='top-bar'> <ul class='title-area'> <li class='name'> <h1> <a href="#">Ribbit</a> </h1> </li> </ul>

<li class='toggle-topbar menu-icon'>
<a href=><span>Menu</span></a>
</li>

<section class='top-bar-section'> <ul class='right'> <li><a href="#">Home</a></li> <li><a href="#">About Ribbit</a></li> <li class='has-dropdown'> <a href="#">Treehouse</a> <ul class='dropdown'> <li><a href="#">About Treehouse</a></li> <li><a href="#">Video Library</a></li> <li><a href="#">Tracks</a></li> <li class='divider'></li> <li><a href="#">Plans & Pricing</a></li> </ul>

    </li>
</ul>

</section> </nav> </div>

<div class='row'> <div class='large-12 columns' data-orbit> <div> <h1>Self-destructing message app</h1> <p class=" lead">Your mission, if you choose to accept it: Learn how to build this fun little app!</p> <p class="btn-group radius"> <a class ='medium button success' href="#">Download the app</a> <a class ='medium button hide-for-small' data-reveal-id='formModal'>Text me the link</a> </p> </div> <div> <h1>Learn how to build it for iOS</h1> <p class='lead'>We'll teach you to build it from scratch!</p> <p class ='button success' href="#">Get started today!</a> </p> </div> <div> <h1>Learn how to build it for Android</h1> <p class=" lead">We'll teach you to build it from scratch!</p> <p class ='button success' href="#">Get started today!</a> </p> </div> </div>

<div class='row'> <div class='large-4 columns'> <h3>Delete photo & video based on a timer</h3> Learn how to write the code that downloads and displays messages, photos, and videos that timeout after a few seconds. Then create the code that deletes them from the back-end to make them "self destruct." </div>

<div class='large-4 columns'> <h3>Build an easily managed friends list</h3> <p>Learn what Parse.com offers as a "backend-as-a-service" platform. Explore the user account management APIs provided by Parse.com and write the code to create and save a new user in a Parse.com data store.</p> </div>

<div class='large-4 columns' > <h3>Store & retrieve data using cloud servers</h3> <p>We'll teach you how to upload images, video files, and messages to Parse.com's cloud servers. Then learn how to retrieve the data by setting up custom queries that download and display them in the app.</p> </div>

</div>

<div class="row"> <hr> <div class="large-6 hide-for-small columns"> <h4>Learn how to make this app</h4> <p>We will build on the concepts learned in previous iOS projects to create an app that will allow users to send photo or video messages to other users that will be deleted once viewed.</p> </div> <div class="large-6 columns"> <h3>About PBCS</h3> <p>PBCS provides an extensive library courses and training exercises that will give you a wide range of in-demand technology skills that will help you land your next dream job.</p> <a href="#" class= 'medium button success radius'>Register at PBCS »</a> </div>

   <div class="row">
  <div class="col-sm-6 col-md-push-6">
    <img class="img-responsive" src="img/thumb.jpg">
  </div>
  <div class="col-sm-6 col-md-pull-6">
    <p>Get access to these courses for only $24 a month!</p>
    <a href="#">Visit Treehouse Now &raquo;</a>
  </div>
</div>

<div id='formModal' class='reveal-modal small'> <h3>We'll text you the link!</h3> <a href='#' class='close-reveal-modal'>×</a> <form class='custom'> <fieldset> <input type='tel' placeholder='Mobile Phone'> <select> <option> iOS </option> <option> Androia </option> </select> <button type='submit' class='small button'>Text me!</button> </fieldset> </form> </div> <!--End Form Modal

<!-Video Modal-->

Welcome to the Treehouse Community

Looking to learn something new?

Marie Urbina

Marie Urbina

building modals with form - Building Modals, Custom Forms, and Flexible Video