Sticky Title and Button in a Modal

Question

I am using jquery fancybox to create a modal.

Here is the JsFidlle example

I have two questions.

1. I wanted to load a modal on page load so i have used the following method

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

   Is this fine or any better way to do it?

2. I have Title at the top of the modal and a Button at the end of the page. So when we scroll then Title and Button should be sticky

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

   How can I make Title and Button sticky?

Any help or suggestion would be appreciated.

Thanks in advance

Answer 1

I have wrapped the body content of bodal and given the fixed height. For Modal Opening you can use below Approach

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

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

Please check the below link. http://jsfiddle.net/ulric_469/g34sdc2k/11/

if you use

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

Then it will make problem, if your website is tracking the number of click event on particular element. So I will suggest not use trigger event here.