Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

My modal won't work

My first modal won't work, i have commented it out for the time being, i'm not sure why it won't work. Can you have 2 modals ?

<!DOCTYPE html>
<html>
  <head>
   <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
     <link rel="stylesheet" href="css/bootstrap.css">

    <meta http-equiv="content-type" content= text/html; charset="utf-8">
    <title>Ultra Beauty|Home|Caci Ultra Facials in Basildon Essex</title>


    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Contact Ultra Beauty. CACI Ultra Facial and Treatments from our beauticians in Basildon, Essex. CACI Treatments are becoming " >
    <meta name = "keywords" content = "ultra beauty", "CACI Facials Essex","CACI Treatments Basildon","CACI Treatments Essex", "Ultrabeauty", "Beauty Salon Essex", "Caci facials", "Cnd shellac nails essex","CACI Ultra Essex", "Waxing Essex">

    <meta name="robots" content="index, follow">
    <meta name="author" content="Ultra Beauty">
    <link rel="stylesheet" href="/css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Londrina+Shadow' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Parisienne' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="/css/name.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="icon" type="image/x-icon" href="/img/favicon.png" />

    <!-- boostrap code -->


  </head>





  <body>
    <header>
    <div itemscope itemtype="http://schema.org/BeautySalon">
      <a href="/index.html" id="logo">
        <h1 itemprop="name">Ultra Beauty</h1>
        <h2>CACI Facials</h2>
      </a>
     <nav>
        <ul>
          <li><a href="/index.html" class="selected">Home</a></li>
          <li><a href="/about.html" >About</a></li>
          <li><a href="/contact.html" >Contact</a></li>
          <li><a href="#offers" data-toggle="modal">Offers</a></li>
        </ul>
      </nav>
    </header>
        <div id="wrapper">
        <section>
          <ul id="gallery">
            <li>
              <a href="https://db.tt/uX9NSTJ4">
                <img src="img/brochure.jpg" alt="">

                <p>Click To View Our Brochure</p>
              </a>
            </li>


            <li>
              <a href="#jowll" data-toggle="modal">
                <img src="/img/jowll.jpg" alt="">
                <p>New ! We now offer the amazing jowl lift</p>
              </a>
            </li>
            <li>






              <a href="#">
                <img src="/img/makeup.jpg" alt="">
                <p>We Offer CND Shellac Nails</p>
              </a>
            </li>
            <li>
              <a href="http://www.caci-international.co.uk">
                <img src="/img/caci4.jpg" alt="">
                <p>Visible Results Without Surgery</p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="/img/facial.jpg" alt="">
                <p>Refreshing facials</p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="/img/cacis.jpg" alt="">
                <p>The cheapest CACI Treatments in Essex</p>
              </a>
            </li>


          </ul>
        </section>

          <footer>

          <a href="https://www.facebook.com/caciultrabeauty"> <img src="/img/facebook-wrap.png" alt ="facebook profile" class="social-icon"></a>
           <a href="https://www.google.com/+UltrabeautyCoUk"> <img src="/img/google-wrap.png" alt ="facebook profile" class="social-icon"></a>
          <a href="https://twitter.com/caciultrabeauty"><img src="/img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>

          <p>&copy; 2015 Ultra Beauty</p>


        </footer>
      <!--modal 1
        <div class="modal fade" id="jowl" role="dialog">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                  <div id="modal">
                  <h3>The brand new jowl lift has arrived </h3>
                  </div>
                </div>
                </div>
                </div>
                </div>
                <div class = "modal-body">

                      <img src="img/jowl.jpg" alt="The all new Jowl Lift">
                 </div>



                     <div class="modal-footer">
                          <a class="btn btn-success" href="/contact.html">I'm Interested</a>

                          <a class="btn btn-default" data-dismiss ="modal">Close</a>
                  </div> 
                  -->

     <!-- modal 2  -->

            <div class="modal fade" id="offers" role="dialog">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                  <div id="modal">
                  <h3>Our Latest Special Offer ! </h3>
                  </div>
                </div>



                <div class = "modal-body">
                      <p> We believe that everyone should be able to access the remarkable Caci facials at the lowest cost, so we are now offering a taster for just £25  </p>
                      <img src="img/promotion1.jpg" alt="£25 taster">
                 </div>



                     <div class="modal-footer">
                          <a class="btn btn-success" href="/contact.html">I'm Interested</a>
                          <a class="btn btn-default" data-dismiss ="modal">Close</a>
                  </div> 


                 <!-- boostrap modal -->

                  <!-- End -->



        <!-- form for the modal and one for the actual main page -->



         </div>
  </body>
</html>

1 Answer

Adrian Adr
Adrian Adr
9,268 Points

Hi, yes you can have as many modals as you like. Just add before the class attribute your modal role have an example below:

<div class="modal fade first-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal fade secound-modal" tabindex="-1" role="dialog" aria-hidden="true">

try that. hope it helps. :)