Bootstrap Bootbox 在加载警报框后删除浏览器滚动条答案

【问题标题】：Bootstrap Bootbox removing browser scrollbar after loading alertboxBootstrap Bootbox 在加载警报框后删除浏览器滚动条
【发布时间】：2013-11-02 08:14:45
【问题描述】：

我正在处理引导箱警报。它工作正常，但在加载警报后，我的浏览器的滚动条消失了，我无法滚动我的页面

bootbox.dialog({
      closeButton:false,
      message: "Do you clear all contents?",
      title: "Are you sure to clear all contents?",
      buttons: {

        main: {
          label: "Cancel",
          className: "btn-primary btn-small",
          callback: function(result) {

          }
        },
        danger: {
          label: "Clear!",
          className: "btn-danger btn-small",
          callback: function(result) {
            // clear contents from here
            content_id.find(".canvas_frame").html("");

            $(".sidebar").find(".tbProperties").hide();
            showtbBoxpanel(); // $(".sidebar").find(".tbBoxpanel").show();

          }
        }

      }
    });

【问题讨论】：

我有一个类似的问题..滚动条消失了，所以内容跳到了右边，但是滚动条应该重新出现的地方，但是直到我关闭 Bootbox，内容才跳回来。他们的例子没有这样做。

标签： jquery css twitter-bootstrap bootbox

【解决方案1】：

尝试将其添加到您的 CSS：

<style>
.modal{
    direction:rtl;
    overflow-y: auto;
}

.modal .modal-dialog{
    direction:ltr;
}

.modal-open{
    overflow:auto;
}
</style>

【讨论】：

不太清楚为什么使用direction。它使我的滚动条转到页面的左侧。只需将其从 .modal 中删除并完全删除 .modal .modal-dialog 对我来说就是魅力所在。

【解决方案2】：

试试这个 CSS

.modal-open{
   overflow: hidden !important; 
   padding: 0px !important;
}
 .modal-open .modal{
   overflow: hidden !important; 
}

【讨论】：

【解决方案3】：

它解决了我的问题：

body 
{
    overflow-y: scroll !important;
}

body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
    margin-right: 0;
}

.bootbox.modal {
    overflow:hidden !important;
}

【讨论】：

【解决方案4】：

@{
    ViewBag.Title = "Index";
}

<br />
<h2>Index</h2>

<p>
    Some Content Here.....<br />
    .....<br />
    .....<br />
    .....<br />

    <a id="alert" href="#">Alert!</a>
</p>

@section Scripts{ 
  @*If working with bootbox.min.js and Asp.Net MVC 5 (this worked; no scrollbar and no shifting)*@
  <style type="text/css">
    body {
        overflow-y: hidden !important;
    }

    body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
        margin-right: 0;
    }

    .bootbox.modal {
        overflow: hidden !important;
    }
</style>


<script type="text/javascript">

    $(document).on("click", "#alert", function (e) {
        bootbox.alert("Hello world!", function () {
            console.log("Alert Callback");
        });
    });
</script>
}

【讨论】：