I'm looking to implement a series of bootstrap modals with previous/next arrows and a carousel between them.
Here's where I'm at:
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
<
>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
This page demonstrates the behaviour I'm looking to emulate.
How would I write a script in order to switch modals on click of either a.carousel-prev or a.carousel-next?
I think you have your terminology slightly off, the linked page has one modal, with one carousel, which has multiple slides.
This is basically what you are looking for.
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<!-- Carousel Start-->
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
Slide 1
</div>
<div class="item">
Slide 2
</div>
<div class="item">
Slide 3
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
<!-- Carousel End -->
</div>
</div>
Related
I have a simple html design with an animated menu. I am trying to implement bootstrap on it and make modal window. But when someone clicks at contact, my animated menu stops working. Here you can check the problem.
My modal code here. I'm using #mymodal on menu link.
<!-- 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 id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You can do this using Jquery
$(document).on("click",".menu",function(){
$("#myModal").modal("show")
})
I am currently trying to produce a portfolio-style website, and decided to use Bootstrap 3. I want to use modals to display my work from a simple image gallery. I have managed to successfully produce each modal and remote link them, however I run into an issue after opening the second modal. The second modal's content is then the content shown for any subsequent modal called. I have tried using javascript to destroy the modal on each instance of hide, yet it doesn't seem to be working and I can not figure out why. Can someone please tell me what I'm doing wrong?
Gallery:
<div class="banner" id="portfolio"><h2>WORK</h2></div>
<div id="gallery" class="final-tiles-gallery effect-zoom effect-fade-out caption-top caption-bg">
<div class="ftg-items">
<div class="tile">
<a class="tile-inner" data-title="VoodooDesignCo." data-toggle="modal" href="portfolioDIR/voodooDetails.php" data-target="#myModal">
<img class="item" data-src="images/work/voodooDesign.png">
<span class='title'>Voodoo Design Co.</span>
<span class='subtitle'>Logo Design and Branding</span>
</a>
</div>
<div class="tile">
<a class="tile-inner" data-title="Godzilla (2014) - Poster Design" data-toggle="modal" href="portfolioDIR/godzillaDetails.php" data-target="#myModal">
<img class="item" data-src="images/work/godzillaPoster.png">
<span class='title'>Godzilla (2014)</span>
<span class='subtitle'>Poster Design</span>
</a>
</div>
<div class="tile">
<a class="tile-inner" data-title="Iron & Air - Title Design" data-toggle="modal" href="portfolioDIR/ironAirDetails.php" data-target="#myModal">
<img class="item" data-src="images/work/ironAirType.png">
<span class='title'>Iron & Air</span>
<span class='subtitle'>Game Concept - Title Design</span>
</a>
</div>
<div class="tile">
<a class="tile-inner" data-title="Aquaman - Title Design" data-toggle="modal" href="portfolioDIR/aquamanDetails.php" data-target="#myModal">
<img class="item" data-src="images/work/aquamanType.png">
<span class='title'>Aquaman</span>
<span class='subtitle'>Movie Concept - Title Design</span>
</a>
</div>
<div class="tile">
<a class="tile-inner" data-title="AllBikes.com.au" data-toggle="modal" href="portfolioDIR/allbikesDetails.php" data-target="#myModal">
<img class="item" data-src="images/work/allbikesWeb.png">
<span class='title'>AllBikes.com.au</span>
<span class='subtitle'>Website Design and Development</span>
</a>
</div>
</div>
</div>
Modal:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal" aria-label="close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title text-center"></h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button class="btn btn-defualt" data-dismiss="modal" aria-hidden="true"><span class="fa fa-hand-o-left"></span> Back</button>
</div>
</div>
</div>
</div>
Remote Modal:
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal" aria-label="close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title text-center">Iron & Air Title Design - Video Game Concept</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 text-center">
<img src="images/work/ironAirType.png" alt="Iron & Air: Racing Video Game" class="details img-responsive img-center">
<p>Title Design/Typeface Exploration</p>
</div>
<div class="col-sm-6">
<h4>Project Info:</h4>
<p>his project required the typeface design or title design for a game, movie, T.V. show, etc. This design is based on a fictional racing video game, called 'Iron & Air'</p>
<hr>
<p>blah blah blah blah</p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-defualt" data-dismiss="modal"><span class="fa fa-hand-o-left"></span> Back</button>
</div>
ModalReset JavaScript:
$("#myModal").on('hidden.bs.modal', function () {
$("#myModal").removeClass('fade').modal('hide');
$(this).data('bs.modal', null);
});
I did something similar a while back...
I used one modal and pulled in the content from an external file.
each modal would load new content into the same modal with something like this
$("#info").click(function(){
var url = HOST_NAME+"info/modal-data";
$( "#modal-body" ).load(url, function() {
$( "#modal-body" ).show("slow");
});
loadModal();
});
and open the modal with this
function loadModal() {
$( "#modal-body .page-wrapper" ).remove();
$( "#modal-body" ).hide();
$('#edit').modal();
}
Modal
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div id="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><?=__('modal_close')?></button>
</div>
</div>
</div>
</div>
I want to make a sub modal in a main modal.
<!-- Button to trigger modal -->
Launch demo modal
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
Main contant
<!-- Button to trigger modal -->
Launch sub demo modal
<!-- Sub Modal -->
<div id="subModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
Sub contant
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
The problem is that when I close the sub modal,the main modal was closed together.
Can I set the close event for every modal on one's own?
You don't need to have each modal nested on the parent modal. To you archive what you need, separe the modals, so each node modal will have it own close data-dissmis attribute, and when triggered it will dissmis only that modal. (And as you need to work with submodals, it will fit your needs, because even with separete html trees, the submodal will be called above the main modal, or the first one)
Heres the fiddle example ( The HTML are a bit desorganized, sory about that ):
http://jsfiddle.net/h3WDq/202/
<div class="container">
<h3>Modal Example</h3>
<!-- Button to trigger modal -->
<div>
Launch Modal
</div>
<!-- Modal -->
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Standard Selectpickers</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
Launch Modal
</div>
</div>
<!-- Modal -->
<div id="myModal2" class="modal hide" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Standard Selectpickers</h3>
</div>
<div class="modal-body">
<select class="selectpicker" data-container="body">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
<style>
As i said, you going to create two modals separated, and each one will have its own data-dismiss button, and when them get called, they will just close that specific modal, and as you can see in my example they work as submodals.
I have a gallery inside my modal window done via Bootstrap.
I want to be able to horizontally scroll within it using this: http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/.
The problem is, it scrolls the page behind it, not the actual modal window. When I don't have the Horizontal Scrolling script on, I can scroll in the modal with shift+mousewheel, which is what I want to do width the script(just without using shift ofcourse).
My JSFiddle: http://jsfiddle.net/8XdVt/22/
HTML:
<head>
<script type="text/javascript" src="http://yandex.st/jquery/mousewheel/3.0.6/jquery.mousewheel.min.js"></script>
</head>
<body>
<!-- Button trigger modal -->
<h2>Modal Gallery</h2>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div id="gallery-modal">
<img src="http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpg" alt="">
<img src="http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpg" alt="">
<img src="http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpg" alt="">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<h2>Normal Gallery</h2>
<div id="gallery">
<img src="http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpg" alt="">
<img src="http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpg" alt="">
<img src="http://31.media.tumblr.com/67151918dbf1e1ca27ed5a0921970c81/tumblr_n5waphpp4M1st5lhmo1_1280.jpg" alt="">
</div>
</body>
Okay, made it work! All I did was change the scrolling script, so it doesn't scroll in html and body, but on .modal, which is the main class of the modal window!
Updated JSFiddle: http://jsfiddle.net/8XdVt/28/.
Changed
$("html,body").mousewheel(function(event, delta)
To
$(".modal").mousewheel(function(event, delta)
I am trying to have a twitter-bootstrap modal dialog box appear on page load for a certain view. I am doing this using the code:
<script>
$(window).load(function(){
$('#shareModal').modal('show');
});
</script>
<div class="modal hide fade" id="shareModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
On page load, instead of the modal popping up, the screen appears "greyed" out (faded) and nothing appears. Anyone have any idea what could be going on? Thank you.
Hmmm,
I think that you should try this with Bootstrap 3:
<div class = "modal fade" id="shareModal" role = "dialog">
<div class = "modal-dialog">
<div class = "modal-content">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
</div>
</div>
in your browser's console just type: $('#shareModal').modal(); to test your modal
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
One fine body…
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
JS
$(window).load(function(){
$('#myModal').modal('show');
});
DEMO