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

You can look at the live version of my site here （滚动到作品集并点击一个项目）

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

所以我需要：

1. 另一种修复“打开警报前滚动到顶部”的方法 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（根据此问题中的要求，这似乎有点过头了），那么您想要的听起来就像 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 的模态样式。

Demo

Answer 2

我有同样的问题。 Bootbox正在将body的溢出改为隐藏，使页面变小无法滚动。

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