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

You can look at the live version of my site here （滚动到投资组合并点击一个项目）

我已经设置了一个小提琴，让每个人都更容易：http://jsfiddle.net/p4Yw2/

所以我需要：

修复“在打开警报前滚动到顶部”的另一种方法除javascript:void(0);
一种限制滚动直到模态之后的方法（现在你可以在模态下一直向下滚动页面是开放的）

更新：好的，导致此问题的原因是我的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（根据这个问题中的要求似乎有点矫枉过正）那么你想要的东西听起来像Bootstrap提供的开箱即用的模式加载远程内容。你可以拥有所有不同的模态内容＆＃39;存储为单独的页面，然后让每个链接指向不同的模态内容。 E.g：

<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的模态样式。

<强> Demo

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

Bootbox模式在打开之前滚动到页面顶部

3 个答案: