Bootstrap Bootbox在加载提示框后如何去除浏览器滚动条

Question

我正在使用bootbox警告框。它正常工作，但在加载警告框后，我的浏览器滚动条消失了，我无法滚动页面。

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();

          }
        }

      }
    });

- Aneesh Sudhakaran

---

我有类似的问题... 滚动条消失了，所以内容跳到右侧，但是滚动条应该出现的位置重新出现了，但是内容直到我关闭Bootbox之前都不会跳回来。他们的示例没有这种情况。 - Laurence Cope

Answer 1

尝试将以下内容添加到您的CSS中：

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

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

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

- hakan.kozakli

---

不太确定为什么要使用“direction”这个属性，它会使我的滚动条移动到页面的左侧。只需从“.modal”中移除它，并完全删除“.modal .modal-dialog”，即可解决问题。 - Felipe Leão

Answer 2

尝试使用这个CSS。

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

- Arun Kushwaha

Answer 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;
}

- Ricardo de Assuncao Goncalves

Answer 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>
}

- RodMac