Bootbox模式滾動到打開頁面的頂部

Question

我正在將bootstrap 3和bootbox.js用於可過濾的產品組合，並且當模式的長度超過瀏覽器窗口時，我希望能夠向下滾動，但是您不能滾動通過模式。

默認情況下，當您單擊投資組合項目時，模式將滾動到頁面頂部以將其打開。 我用javascript:void(0); 在我的投資組合鏈接上可以解決此問題。 但是position:absolute上的.modal打破了這一點。

但是position:absolute和overflow:auto允許我按所需方式滾動模態（只是不知道如何限制滾動直到模態結束）

看看我的CSS：

.modal {
top: 10%;
left: 50%;
margin-left: -280px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
outline: none;
display: table;
position: absolute;
}

.modal-open {
overflow: auto;
}

您可以在此處 查看 我網站的實時版本 （滾動至投資組合，然后單擊一個項目）

我設置了一個小提琴以使每個人都更容易： http : //jsfiddle.net/p4Yw2/

所以我需要：

1. 除了javascript:void(0);之外，還有另一種解決“打開警報之前滾動到頂部”問題的方法javascript:void(0);

2. 一種將滾動限制到模態之后的方式（現在，當模態打開時，您可以一直向下滾動頁面）

更新：好的，導致此問題的是我的smooth-scroll.js文件，該文件包含：

$(function(){   

var $window = $(window);
var scrollTime = 0.7;
var scrollDistance = 275;

$window.on("mousewheel DOMMouseScroll", function(event){

    event.preventDefault(); 

    var scrollTop = $window.scrollTop();
    var finalScroll = scrollTop - parseInt(delta*scrollDistance);

    TweenMax.to($window, scrollTime, {
        scrollTo : { y: finalScroll, autoKill:true },
            ease: Power1.easeOut,
            overwrite: 5                            
        });

    });
});

Answer 1

如果您不需要 Bootbox（根據此問題的要求，這似乎有些矯kill過正），那么您想要的聽起來像是Bootstrap提供的隨其以模式加載遠程內容的方式。 您可以將所有不同的模式“內容”存儲為單獨的頁面，然后使每個鏈接指向不同的模式內容。 例如：

<a href="path_to_remote_content" data-toggle="modal" data-target="#modal" id="branding1"> 。

此技術將需要您在頁面中已經有空的模式代碼，然后將內容加載到.modal-content 。

頁面的模式HTML

<!-- Modal -->
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
    </div>
  </div>
</div>

遠程內容HTML

<div class="modal-header">
  <h4>Beach Me</h4>
</div>
<div class="modal-body">
  ...
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

您需要刪除所有已添加的，覆蓋Bootstrap模態樣式的樣式。

演示

Answer 2

我遇到過同樣的問題。 Bootbox正在將主體的溢出更改為隱藏，從而使頁面變小，從而使其無法滾動。

這個CSS為我解決了：

body.modal-open {
    overflow: visible;
}

Answer 3

<a>標記添加一個類來處理所有

jQuery的

$('.modal-section').click(function() {
      $('section').css("display",'none');
}

要么

$('#branding1').click(function() {
            $('section').css("display",'none');
            bootbox.alert('/*you html*/');
                  });

$('#print3').click(function() {
           $('section').css("display",'none');
            bootbox.alert('/*you html*/');
                  });

和按鈕關閉模式：

   $('section').css("display",'block');