Bootstrap 3.3.7 模态打开并跳转到顶部答案

【问题标题】：Bootstrap 3.3.7 modal open and jump to topBootstrap 3.3.7 模态打开并跳转到顶部
【发布时间】：2018-09-13 02:19:22
【问题描述】：

当我在 Bootstrap 3.3.7 中打开模式时，它会跳转到页面顶部。

我正在使用来自官方 CDN 的 Bootstrap JS 3.3.7

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

我已经尝试过这样的 CSS 解决方案，但不适合我

body.modal-open {
    overflow: visible;
}

这是我的 webapp 在生产中的 URL，可以看到 Boostrap 模态的行为。 My webapp with modal issue

Button with modal problem

【问题讨论】：

.modal-open{ position: relative; } 为我工作 =)
你能解释更多吗，你想做什么。您是否尝试从页面中移除滚动条。

标签： css twitter-bootstrap modal-dialog bootstrap-modal

【解决方案1】：

如果您尝试从模式中删除滚动。这可能是您的解决方案。

你可以对你的模态做一些事情

模态内容过多（删除不需要的元素）
更改填充（使用您的自定义 CSS 覆盖引导 css）
更改文本区域的高度。
将modal-lg 类添加到your modal-dialog <div>

例如：<div class="modal-dialog modal-lg" role="document">

添加了一些示例 CSS，可以帮助您移除滚动条。

最后添加了一个屏幕截图，说明完成上述所有更改后的外观。

引导模型：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;
}

【讨论】：

您也可以将modal-dialog-centered 添加到您的modal-dialog
以使其垂直居中。