Twitter Bootstrap Scrollable Modal

Twitter Bootstrap 3 Modal with Scrollable Body

Just add:

.modal-content {
  height:250px;
  overflow:auto;
}

The height can of course be adapted to your personal needs.

Working Example

Update:

It's actually pretty easy. Just add:

.modal-body {
    max-height: calc(100vh - 212px);
    overflow-y: auto;
}

to your css.

It uses vh and calc, which also happen to have a good browser support (IE9+).

This is based on this answer. Please read there for more detailed information, I won't copy his answer.

Working Example

Twitter bootstrap modal listen when scrollbar at bottom

Adding .scrollTop() to .innerHeight() you get where should be the modal body. Compare this value with scrollHeight and that's all:

$('#exampleModalLong .modal-body').on('scroll', function() {
    if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
        console.log('end reached');
    }
})
.modal-body{
    height: 250px;
    overflow-y: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <p>..............</p>
                <p>..............</p>
                <p>..............</p>
                <p>..............</p>
                <p>..............</p>
                <p>..............</p>
                <p>..............</p>
                <p>..............</p>
                <p>..............</p>
                <p>..............</p>
                <p>..............</p>
                <p>..............</p>
                <p>..............</p>
                <p>..............</p>
                <p>..............</p>
                <p>..............</p>
                <p>..............</p>
                <p>..............</p>
                <p>..............</p>
                <p>..............</p>
                <p>..............</p>
                <p>..............</p>
                <p>..............</p>
                <p>..............</p>
                <p>..............</p>
                <p>..............</p>
                <p>..............</p>
                <p>..............</p>
                <p>..............</p>
                <p>..............</p>
                <p>..............</p>
                <p>..............</p>
                <p>..............</p>
                <p>..............</p>
                <p>..............</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

twitter bootstrap 3 modal on mobile scroll issues

FOR BOOTSTRAP 3

I found a fix for this issue that seems to be good enough for my site.

CSS:

body.modal-open > .wrap {
  overflow: hidden;
  height: 100%;
}

.modal-content, 
.modal-dialog, 
.modal-body { 
  height: inherit; 
  min-height: 100%; 
}

.modal { 
  min-height: 100%; 
}

HTML:

<body>
  <div class="wrap">All non-modal content</div>
  <div class="modal"></div>
</body>

So in the case that a modal is open, all non-modal content is limited to the height of the viewport and overflow is hidden, which prevents the main site from being scrolled, while the modal can still be scrolled.

EDIT: This fix has some issues in Firefox.

Fix for my site was (FF only media query):

@-moz-document url-prefix() {
  .modal-body { height: auto; min-height: 100%; }
  .modal { height: auto; min-height: 100%; }
  .modal-dialog {
    width: 100%;
    height: 100%;
    min-height: 100%;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
  }

  .modal-content {
    height: auto;
    min-height: 100%;
    border-radius: 0;
    border: 0px solid #000;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
  }

}

Twitter Bootstrap Modal scrolling the page up on show

Fixed (10/29/2012)

This issue has been fixed since Bootstrap v2.2.0. See commit e24b46... for details.

(original answer)

This is due to a bug in the implementation of the Twitter Bootstrap Modal (as of 2.1.1). The root of the problem is that the focus is set to the modal prior to it completing its transition. This will only occur under the condition that

  1. the browser supports CSS transitions (and you are using bootstrap-transition.js);
  2. the modal has the class fade; and
  3. when focus is set to an element outside the current view, the browser will scroll to move it into view (e.g., Chrome, Safari).

It should be noted that this affects both the Data API (markup-based) and the Programmatic API (JS-based). However, the reason it is more noticeable when taking the programmatic approach is because, unlike the Data API, it does not automatically restore focus to the triggering element, and, hence, does not scroll the view back down when the modal is hidden.

More info is available on the Twitter Bootstrap repo under Issue #5336: Modal Scrolls Background Content.

A fix has been merged into the 2.1.2-wip branch, which should be up for release any day now.

Here is a demo using the patch bootstrap-modal.js:

JSFiddle

Use modal in a modal after closing the second modal, the scrolling refers to the body

When dealing with bootstrap stacked modal, most common problems are

  1. 2nd modal overlay appearing behind first modal
  2. on closing 2nd modal, scrolling disappear because modal-open removed from <body>

both problems can be solved with custom code as suggested by bootstrap

Multiple open modals not supported
Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.

$(document).ready(function () {
    $('secondmodalselector').on('show.bs.modal', function () {
        $('firstmodalselector').css('z-index', 1039); //this will push the first modal overlay behind second modal overlay
    });

    $('secondmodalselector').on('hidden.bs.modal', function () {
        $('firstmodalselector').css('z-index', 1041); //bring back the first modal overlay to it's normal state when 2nd modal closed
        $('body').addClass('modal-open'); // add `modal-open` class back to body when 2nd modal close so first modal will be scrollable
    });
});

Twitter Bootstrap 3 Modal Window OnScroll Event

So you need to fire something when the user scrolls the content inside the modal. then bind the scroll event to the modal content like this 

$( ".modal-content" ).scroll(function() {
//fire event here
})

also set the height of the model content and set overflow:scroll that way the model becomes scrollable.

Force Twitter Bootstrap 3 modal to not hide vertical scrollbar

In your custom CSS file that should be loaded after the bootstrap CSS add the following code:

.modal-open {
    overflow: scroll;
}

Twitter Bootstrap: trigger modal on anchor link/scroll

Assuming your link has a special class (I used .trigger for the example), you could do this:

$('.trigger').on('click', function() {
  $(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
      $('#myModal').modal('show');        
    }, 250));
    $(this).unbind("scroll");
});

I created an example bootply with a template that resembles your screenshot structure a bit. So don't get confused. Just click the link section 4 on the left side (scroll down a bit), to see the functionality in action.

NOTE: I focussed on you statement:

Now I want a link that points/jumps to an anchor in the document and then instantly displays a modal.

So that the modal opens after the scroll is finished. @Shreeraj Karki answer opens the modal immediately after the click.

BOOTPLY

Bootstrap modal, scrollable does not work

You'll need to follow the hierarchy as bootstrap.

Your code was modal-dialog > modal-content > form > modal-body.

I changed it to modal-dialog > modal-content > modal-body > form.

modal-body should be direct child of modal-content, rest is fine

PS I had to remove map code because of the max char validation of SO

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div id="modal_639f8823-84ba-442d-8aac-c64276ce126e" class="modal fade show" data-backdrop="static" style="z-index: 1040; display: block;" tabindex="-1" role="dialog" aria-modal="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable " role="document">
    <div class="modal-content" style="">
      <div class="modal-header">
        <h5 class="modal-title">Create your first store</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button></div>
      <div class="modal-body">
        <form id="myform">
          <div>
            <div class="mb-2">
              <div class="input-group"> <input placeholder="Store's name" aria-label="" aria-describedby="basic-addon1" class="form-control valid"></div>
            </div>
            <div class="form-group mb-2 row">
              <div class="input-group col-sm-12">
                <div class="blazored-typeahead valid">
                  <div class="blazored-typeahead__controls"><input placeholder="Address" autocomplete="off" type="text" class="blazored-typeahead__input" _bl_6ddea9fa-d464-44f6-9aa9-9f0b16dbba43=""></div>
                </div>
              </div>
            </div>
            <div class="mb-2">
              <div class="input-group">
                <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><i class="fas fa-phone"></i></span></div> <input placeholder="Phone" aria-label="" aria-describedby="basic-addon1" class="form-control valid"></div>
            </div>
            <div class="mb-2">
              <div class="input-group">
                <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><i class="fas fa-envelope"></i></span></div> <input type="text" placeholder="email" aria-label="" aria-describedby="basic-addon1" class="form-control valid"></div>
            </div>
            <div class="mb-2">
              <div class="input-group">
                <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><i class="fas fa-globe-americas"></i></span></div> <input type="text" placeholder="Web site" aria-label="" aria-describedby="basic-addon1" class="form-control valid"></div>
            </div>
            <div class="mb-2">
              <div class="input-group">
                <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><i class="fab fa-facebook-f"></i></span></div> <input type="text" placeholder="Facebook page" aria-label="" aria-describedby="basic-addon1" class="form-control valid"></div>
            </div>
            <div class="mb-2 row"> <span class="input-group col-5"> <input step="any" placeholder="Longitude" aria-label="" aria-describedby="basic-addon1" type="number" class="form-control valid"> </span> <span class="input-group col-5" style="padding-left:0px"> <input step="any" placeholder="Latitude" aria-label="" aria-describedby="basic-addon1" type="number" class="form-control valid"> </span>              <span class="input-group col-2" style="padding-left:0px"> <button type="button" class="btn btn-primary"> <i class="fas fa-map-marker-alt"></i></button> </span></div>
            <div style="height:300px"></div>
          </div>
        </form>

      </div>
      <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="submit" class="btn btn-primary" form="myform">Create a PRO account</button>

      </div>
    </div>
  </div>
</div>

Related Topics

404 Errors on Bundled Jquery CSS, VS2012 Publishing to Azure

Change the Default Responsive Navbar Breakpoint

CSS Positioning Elements Next to Each Other

CSS Image Layouting Before Image Loaded

How Add Class to Parent in Angular Application

Wrapping a Text Around a Circular Element

Glyphicons Rendering as Empty Box

Compile Less Files with Source Maps

Jqgrid Zebra/Alt Rows Background Not Working Due to UI Theme Class

Extracting Content in :After Using Xpath

How to Have Multiple Columns That Consume 100% Height Using Twitter Bootstrap

Input[Type=Number] Placeholder Color in Ff29+

How to Force This CSS Grid to Wrap to a New Line Without Specifying Minmax Sizes

Clip-Path on Chrome Leaves a Strange Line on the Edge

How to Delete Border Spacing in Table

Adjusting Kerning in CSS

How to Create a Calc Mixin to Pass as an Expression to Generate Tags

How to Justify a Single Flexbox Item (Override Justify-Content)


Leave a reply



Submit