Bootstrap 3.3.7 modal open and jump to top

Question

When I open modal in Bootstrap 3.3.7 it jumps to top of page.

I am using Bootstrap JS 3.3.7 from official CDN

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

I have already tried with CSS solutions like this, but doesn´t works for me

body.modal-open {
    overflow: visible;
}

Here is URL of my webapp in production to can see the behavior of Boostrap modal. My webapp with modal issue

Button with modal problem

Answer 1

If you are trying to remove the scroll from modal. This could be your solution.

Few things you can do about your modal

1. Too much of content in modal(Remove element that are not needed)
2. Change the padding(over write bootstrap css with your custom CSS)
3. Change the height of textarea.
4. Add modal-lg class to your modal-dialog <div>

eg : <div class="modal-dialog modal-lg" role="document">

5. Added some sample css that can help you out in removing scroll.

Added a screenshot at last, on how it will look after doing all above changes.

Bootstrap model : https://getbootstrap.com/docs/3.3/javascript/#modals

//Changing the margin of dialog
.modal-dialog {
    margin: 5px auto;
}

//removing extra padding from the body
.modal-body {
    position: relative;
    padding: 0 15px;
}

// Add padding to your footer
.modal .modal-footer {
    border-top: none;
    padding: 10px;
}

// change height of textarea
textarea.form-control {
    height: 100px !important;
}