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

时间:2014-03-20 09:44:19

标签: javascript css twitter-bootstrap bootbox tweenmax

我正在使用bootstrap 3和bootbox.js作为我的可过滤组合,我希望能够在模式比浏览器窗口长时向下滚动,但是你不能滚动到模态。

默认情况下,当您单击项目组合项目时,模态将滚动到页面顶部以打开它。我在我的投资组合链接上使用了javascript:void(0);来解决这个问题。但position:absolute .modal打破了这一点。

但是position:absoluteoverflow: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. 之外的问题
  3. 一种限制滚动直到模态之后的方法     (现在你可以在模态下一直向下滚动页面     是开放的)

  4. 更新:好的,导致此问题的原因是我的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                            
            });
    
        });
    });
    

3 个答案:

答案 0 :(得分:2)

如果你不需要 Bootbox(根据这个问题中的要求似乎有点矫枉过正)那么你想要的东西听起来像Bootstrap提供的开箱即用的模式加载远程内容。你可以拥有所有不同的模态内容'存储为单独的页面,然后让每个链接指向不同的模态内容。 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

答案 1 :(得分:2)

我有同样的问题。 Bootbox正在将主体的溢出更改为隐藏,使页面变小,使其无法滚动。

这个css为我解决了这个问题:

body.modal-open {
    overflow: visible;
}

答案 2 :(得分: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');