Прикрепленная кнопка закрытия для основания 6 раскрывается

Question

Проблема: при отображении данных выше высоты окна прокрутка перемещает значок закрытия со страницы. Я хочу сделать его липким, чтобы у вас всегда была возможность закрыть страницу без прокрутки вверх.

Я попытался загрузить основание 6 .sticky пример в раскрытие, но ни одна из моих попыток не была успешной.

Это то, что, как я думаю, должно работать, которое загружается в контейнер обнаружения <div id="modal2" style="height: 100%"></div> через ajax. К сожалению, кнопка закрытия просто прокручивает содержимое.

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

Я что-то упустил? Кто-нибудь еще смог получить липкую кнопку закрытия в раскрытии?

Answer 1

Основное поведение Reveal заключается в том, чтобы закрыть, если пользователь щелкает за пределами контейнера раскрытия, поэтому пользователь уже имеет быстрый способ выйти из раскрытия.

Однако вы также можете использовать position: fixed; на близком элементе.

Это будет держать его в одном месте, пока модальная прокрутка вверх и вниз.

CSS

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

e.g. in a Fiddle

Использования position: fixed; немного боли для укладки и мобильных телефонов, но это будет в зависимости от конкретной конструкции.