Липкий заголовок и кнопка в модале

Question

Я использую jquery fancybox для создания модальности.

Вот пример JsFidlle

У меня два вопроса.

1. Я хотел загрузить модальное при загрузке страницы, поэтому я использовал следующий метод

     $("#ModalPopup").fancybox({
        }).trigger('click');   
      });
   

   Это нормально или какой-то лучший способ сделать это?

2. У меня есть заголовок в верхней части модального и кнопка в конце страницы.Поэтому, когда мы прокручиваем, тогда заголовок и кнопка должны быть липкими

   <div id="ModalPopup">
       <h1>Title</h1>
    ......
    .......
       <div >
           <button type="button" class="btn-primary">Click</button>
       </div>
   </div>
   

   Как мне сделать заголовок и кнопку липкими?

Буду признателен за любую помощь или предложение.

Заранее спасибо

Answer 1

Я завернул содержимое тела в тело и получил фиксированную высоту. Для модального открытия вы можете использовать ниже подход

$.fancybox.open($("#ModalPopup")[0]);

ref: https://fancyapps.com/fancybox/3/docs/#usage

Пожалуйста, проверьте ссылку ниже. http://jsfiddle.net/ulric_469/g34sdc2k/11/

если вы используете

  $("#ModalPopup").fancybox({
         }).trigger('click');   
       });

Тогда возникнет проблема, если ваш сайт отслеживает количество кликов по определенному элементу. Поэтому я предлагаю не использовать триггерное событие здесь.

Answer 2

Один из способов сделать это - назначить height прокручиваемому элементу, который вы установили в середине заголовка и кнопки.Таким образом, вы можете использовать overflow-y: scroll, чтобы переполненный контент можно было прокручивать, а заголовок и кнопка оставались сверху и снизу соответственно.

См. Скрипту: http://jsfiddle.net/27chr463/