0

问题：当显示数据高于窗口高度时，滚动会将关闭图标移出页面。我想让它变得粘稠，这样您就可以随时选择关闭页面而不滚动回顶部。

我曾尝试将基础 6.sticky示例加载到显示中，但我的尝试都没有成功。

这是我认为应该起作用的，它<div id="modal2" style="height: 100%"></div>通过ajax加载到reveal容器中。不幸的是，关闭按钮只是随着内容滚动。

<script>
    // this script cannot be located in the layouts.js, 
    // because the trigger doesn't exist at page load.

    $('#close-modal2').click(function(){
        // $('#modal2').foundation('close'); didn't work for some reason.  
        // 'open' closes all other modals, so it accomplishes what I need.
        $('#modal').foundation('open');
    });

</script>



<div>
    <button id="close-modal2" class="close-button sticky" 
            aria-label="Close reveal" type="button" data-sticky>
        <span aria-hidden="true">&times;</span>
    </button>
</div>

<div id="paragraph-wrapper" data-sticky-container>
    <div class="row">
        <div class="small-11 small-centered columns">
            <div> Lots of content here, enough to overflow window...</div>
            <div> Losts of content here..... etc.</div>
        </div>
    </div>
</div>

我错过了什么吗？有没有其他人能够在显示中获得一个粘性关闭按钮？

4

1 回答 1

0

Reveal 的基本行为是在用户在显示容器外部单击时关闭，因此用户确实已经有一种快速退出显示的方法。

但是，您也可以position: fixed;在 close 元素上使用。

当模态上下滚动时，这将使其保持在同一个位置。

CSS

#modal2 > .close-button {
    position: fixed;
    top: 1rem; //or whatever
    right: 2rem; //or whatever
}

例如在小提琴中

使用position: fixed;对于造型和手机来说有点痛苦，但这取决于您的特定设计。

于 2016-09-16T13:45:32.213 回答