Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Furquan Ahmad
5,148 PointsMy 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>© 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
9,268 PointsHi, 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. :)