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

Question

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

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

          }
        }

      }
    });

Answer 1

尝试将此添加到您的CSS：

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

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

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

Answer 2

试试这个 CSS

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

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

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