Results 1 to 2 of 2

Thread: Bootstrap Carousel in Modal not working

  1. #1
    Junior Member
    Join Date
    Jul 2015
    Posts
    1

    Bootstrap Carousel in Modal not working

    Hi I'm new to bootstrap and I have set up a fullscreen carousel with a modal pop up. I want the modal popup to contain a bootstrap carousel but I can't get it to work. With the bootstrap carousel you click on an image and it will produce either one or two images associated with the one thumbnail in another carousel which does work. If anyone can help it would be so much appreciated - I have spent days trying to get this to work and have just about given up. The link to my page is here ( ) and to see the modal click on the menu "Test" on the left. Thank you
    Last edited by MadCat; 07-29-2015 at 04:55 PM.

  2. #2
    So your asking for a carousel to make a pop up with another carousel in it.. hmm maybe this will help you

    So for the base car (toggler);
    Code:
                                                   <!-- as you can see the id of this will be base-car so none of the other sliders will use this when you try toggling the next image
                                                         if you dont change this id through out all your carousals then when you have a pop up then its going to activate the base (this one)
                                                         instead of the one in the modal-->
    						<div id="base-car" class="carousel slide" data-ride="carousel">
    							  <!-- Indicators -->
    							  <ol class="carousel-indicators">
    								<li data-target="#base-car" data-slide-to="0" class="active"></li>
    								<li data-target="#base-car" data-slide-to="1"></li>
    								<li data-target="#base-car" data-slide-to="2"></li>
    							  </ol>
    
    							  <!-- Wrapper for slides -->
    							  <div class="carousel-inner" role="listbox">
    								<div class="item active">
    								  <img src="images/filler.jpg" alt="..." >
    								  <div class="carousel-caption">
                                                                     <!-- this will activate the first modal as you see 'data-target' this will be the part of the code that summons your modals make sure they are all different names
                                                                           or else they will choose the main modal-->
    								 <button class="btn" style="opacity:0.7; color:#FF800; border-radius:0;" data-toggle="modal" data-target="#firstmodal">Activate the first modal</button>
    								  </div>
    								</div>
    							 <div class="item">
    							   <img src="images/background.jpg" alt="..." >
    					    		 <div class="carousel-caption">
    								 <button class="btn" style="opacity:0.7; color:#FF800; border-radius:0;" data-toggle="modal" data-target="#secondmodal">activate the second modal</button>
    							   </div>
    							 </div>
    							 <div class="item">
    							   <img src="images/banner.jpg" alt="...">
    					    		 <div class="carousel-caption">
    								 <button class="btn" style="opacity:0.7; color:#FF800; border-radius:0;" data-toggle="modal" data-target="#thirdmodal">activate the third modal</button>
    							   </div>
    							 </div>							 
    
    							  <!-- Controls another part is your going to name the href="#base-car" this changes the images inside your carousal so it needs to have the same name as the id -->
    							  <a class="left carousel-control" href="#base-car" role="button" data-slide="prev">
    								<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    								<span class="sr-only">Previous</span>
    							  </a>
    							  <a class="right carousel-control" href="#base-car" role="button" data-slide="next">
    								<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    								<span class="sr-only">Next</span>
    							  </a>
    							</div>
    					  </div>
    So once you change the ids to suit your needs and you have all the names for the modals (inside the buttons) then you can start summoning the modals;
    Code:
                                    <!-- if you look at the first button id it says "firstmodal" you can change it but you will need to change the id of the modal to what ever you change the buttons target too-->
    				<div class="modal fade" id="firstmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    				  <div class="modal-dialog" role="document">
                                            <!-- here you can change the style of that you want, color, width what ever -->
    					<div  style="border-radius:0; width:700px; height:500px;" class="modal-content">
    					  <div class="modal-header">
    						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    						<h4 class="modal-title" id="myModalLabel">Mad cats popup first</h4>
    					  </div>
    					  <!-- where your content goes-->
    					  <div class="modal-body">
                                                   <!-- now we have more ids for the carousal these will be "firstslider" -->
    						<div id="firstslider" class="carousel slide" data-ride="carousel">
    							  <!-- Indicators -->
    							  <ol class="carousel-indicators">
    								<li data-target="#firstslider" data-slide-to="0" class="active"></li>
    								<li data-target="#firstslider" data-slide-to="1"></li>
    								<li data-target="#firstslider" data-slide-to="2"></li>
    							  </ol>
    
    							  <!-- Wrapper for slides -->
    							  <div class="carousel-inner" role="listbox">
    								<div class="item active">
    								  <img src="images/filler.jpg" alt="...">
    								  <div class="carousel-caption">
    								 <h3>my nice caption</h3>
    								 <p>created in 2015</p>
    								  </div>
    								</div>
    							 <div class="item">
    							   <img src="images/background.jpg" alt="...">
    					    		 <div class="carousel-caption">
    								 <h3>Leo was also known as the king of the stars</h3>
    								 <p>Astrology says that leos have a great sense of leadership</p>
    							   </div>
    							 </div>
    							 <div class="item">
    							   <img src="images/banner.jpg" alt="...">
    					    		 <div class="carousel-caption">
    								 <h3>Barney is no more</h3>
    								 <p>The show barney sucked so they closed it down</p>
    							   </div>
    							 </div>							 
    
    							  <!-- Controls - as you see we also changed the href="" to target our firstslider -->
    							  <a class="left carousel-control" href="#firstslider" role="button" data-slide="prev">
    								<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    								<span class="sr-only">Previous</span>
    							  </a>
    							  <a class="right carousel-control" href="#firstslider" role="button" data-slide="next">
    								<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    								<span class="sr-only">Next</span>
    							  </a>
    							</div>
    					  </div>
    					</div>
    				  </div>
    				</div>
    So thats how you can do it, if you want to use just an image to toggle then you can do;

    Code:
    <img src="#" alt="#" data-toggle="modal" data-target="#firstmodal" />
    To change the style of the modal look for;
    Code:
    <div  style="border-radius:0; width:700px; height:500px;" class="modal-content">
    I have taken the curves off with border-radius set to 0. You can change the background color, color anything by using that or browsing the CSS file for it works too but i prefer doing it this way

    though if you use it on a carousal smaller then 500px by 500px (or 4 grid rows) you wont be able to have any H1-H4 captions just normal text for them to toggle it, or if its full screen you can have as many different stuff that covers up to half the image and it will still toggle the modal (provided they click on the top half)

    Its also important to have all your carousal items match up, so for every carousal group it has to have its own code or else it will toggle the carousal with the same name in the code prior to the carousal you wish to activate

    This is okay;
    Code:
    <div class="modal fade" id="firstmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    
    <div id="firstslider" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
    <li data-target="#firstslider" data-slide-to="0" class="active"></li>
    <li data-target="#firstslider" data-slide-to="1"></li>
    <li data-target="#firstslider" data-slide-to="2"></li>
    </ol>
    
    <a class="left carousel-control" href="#firstslider" role="button" data-slide="prev">
    <a class="right carousel-control" href="#firstslider" role="button" data-slide="next">
    
    
    
    
    <div class="modal fade" id="secondmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    
    <div id="secondmodal" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
    <li data-target="#secondmodal" data-slide-to="0" class="active"></li>
    <li data-target="#secondmodal" data-slide-to="1"></li>
    <li data-target="#secondmodal" data-slide-to="2"></li>
    </ol>
    
    <a class="left carousel-control" href="#secondmodal" role="button" data-slide="prev">
    <a class="right carousel-control" href="#secondmodal" role="button" data-slide="next">
    This is not okay
    Code:
    <div class="modal fade" id="firstmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    
    <div id="firstslider" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
    <li data-target="#firstslider" data-slide-to="0" class="active"></li>
    <li data-target="#firstslider" data-slide-to="1"></li>
    <li data-target="#firstslider" data-slide-to="2"></li>
    </ol>
    
    <a class="left carousel-control" href="#firstslider" role="button" data-slide="prev">
    <a class="right carousel-control" href="#firstslider" role="button" data-slide="next">
    
    
    
    
    <div class="modal fade" id="firstmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    
    <div id="firstslider" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
    <li data-target="#firstslider" data-slide-to="0" class="active"></li>
    <li data-target="#firstslider" data-slide-to="1"></li>
    <li data-target="#firstslider" data-slide-to="2"></li>
    </ol>
    
    <a class="left carousel-control" href="#firstslider" role="button" data-slide="prev">
    <a class="right carousel-control" href="#firstslider" role="button" data-slide="next">

    So this should help you out alot if you have any other questions feel free to message me through PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •