0

我将 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);

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

    });
});
4

3 回答 3

2

如果您不需要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 模式样式的样式。

演示

于 2014-03-26T00:57:13.567 回答
2

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

这个css为我解决了它：

body.modal-open {
    overflow: visible;
}
于 2014-11-14T18:48:22.110 回答
0

<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');
于 2014-03-24T01:00:42.170 回答