How can I stop my Bootstrap modal buttons from scrolling down the page?

Question

I have a Carousel embedded in a Bootstrap modal. It can be seen by clicking any of the logos on this page. For some reason, when I click the carousel nav buttons, the page behind the modal scrolls down and the buttons don't work. Any idea what might be causing this?

I'm using a CMS, so apologies for the fragmentation but here's my code:

Modal:

{assign var="uniqueID" value=$gallerydir}
{* gallerydir is a sneaky little bastard that like to change. uniqueID keeps it constant *}

<ul class="nav nav-tabs" id="{$uniqueID}">
  {foreach from=$images item=folderName name=nav}
    {if $smarty.foreach.nav.first}
    <li class="active"><a data-toggle="tab" href="#{$folderName->filename}">{$folderName->title}</a></li>
    {else}
    <li><a data-toggle="tab" href="#{$folderName->filename}">{$folderName->title}</a></li>
    {/if}
  {/foreach}
</ul>
<div class="tab-content">
 {foreach from=$images item=folder name=folderCount}
  {if $smarty.foreach.folderCount.first}
    <div id="{$folder->filename}" class="tab-pane fade in active">
  {else}
    <div id="{$folder->filename}" class="tab-pane fade">
  {/if}
      {Gallery dir="PortfolioGallery/`$uniqueID`/`$folder->filename`" template='CategoryViewer'}
    </div>

 {/foreach}
</div>

<script type="text/javascript">
$(document).ready(function(){
    $("#{$uniqueID} a").click(function(e){
        e.preventDefault();
        $(this).tab('show');
    });
});
</script>

Carousel inside of the modal:

{assign var="category" value=$gallerydir}
<div id="{$category}-carousel" class="carousel slide" data-ride="carousel">
    <!-- Carousel indicators -->
    <ol class="carousel-indicators">
        <li data-target="#{$category}-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#{$category}-carousel" data-slide-to="1"></li>
        <li data-target="#{$category}-carousel" data-slide-to="2"></li>
    </ol>   
    <!-- Carousel items -->
    <div class="carousel-inner">
     {foreach from=$images item=slide name=slideCount}
      {if $smarty.foreach.slideCount.first}
        <div class="item active">
      {else}
        <div class="item">
      {/if}
            <h2>Slide 2</h2>
            <img src="{$slide->file}" />
            <div class="carousel-caption">
              <h3>Second slide label</h3>
              <p>Aliquam sit amet gravida nibh, facilisis gravida…</p>
            </div>
        </div>
     {/foreach}
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#{$category}-carousel" data-slide="prev">
        <i class="fa fa-chevron-left"></i>
    </a>
    <a class="carousel-control right" href="#{$category}-carousel" data-slide="next">
        <i class="fa fa-chevron-right"></i>
    </a>
</div>

EDIT: This script is on my page... Could it be causing the problem?

<!-- Custom JavaScript for the Side Menu and Smooth Scrolling -->
<script>
$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {

            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});
</script>

You must have conflicting Javascript, it looks like the nav buttons are tying into a scroll function instead of animating the carousel. Can you share any JS you may be using? — APAD1, Aug 07 '14 at 17:10
You have a lot of errors in your HTML markup: [validation results](http://validator.w3.org/check?uri=http%3A%2F%2Fvps.glengroup.com%2F~declan%2FCMSMS%2F%23portfolio&charset=%28detect+automatically%29&doctype=Inline&group=0). There are several duplicate IDs, that's probably the problem. Fix that first. — azeós, Aug 07 '14 at 17:12
@APAD1 Thanks for taking the time to answer. I've added the JS in to my main post. That and the script in the first box are really the only ones. — PintSizeSlash3r, Aug 07 '14 at 17:50
@azeós Thank you, too. I'm going through now and fixing the duplicate IDs — PintSizeSlash3r, Aug 07 '14 at 17:51
Comment out the script you added to the question and then see if the problem continues. I'm guessing that script is what is causing the problem, so you're going to have to make the selectors in that script more specific so it doesn't affect your modal carousel. — APAD1, Aug 07 '14 at 17:59

score 0 · Answer 1 · edited May 23 '17 at 12:31

The script referenced in this question broke a Bootstrap Carousel I added to a project. I found you can add multiple selectors on not, as follows:

$(function() {
    $('a[href*="#"]:not([href="#"],[href="#my-bootstrap-carousel"])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
        $('html, body').animate({
        scrollTop: target.offset().top
        }, 500);
        return false;
        }
        }
    });
});

Hopefully this saves someone 20 minutes of Googling :)

How can I stop my Bootstrap modal buttons from scrolling down the page?

1 Answers1