代码之家 › 专栏 › 技术社区 › dsamardjiev

启动框模式在打开前滚动到页面顶部

gsap bootbox twitter-bootstrap css javascript

dsamardjiev · 技术社区 · 11 年前

我正在使用bootstrap 3和bootbox.js作为我的可过滤组合,我希望当模式比浏览器窗口长时能够向下滚动,但您应该无法滚动通过模式。

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

但是 位置:绝对 和 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                            
        });

    });
});

3 回复 | 直到 11 年前

Vin 10 年前

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

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

body.modal-open {
    overflow: visible;
}

davidpauljunior 11 年前

如果你没有需要 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

alessandrio 11 年前

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