模态中的粘性标题和按钮

Question

我正在使用 jquery fancybox 创建模态。

这里是JsFidlle例子

我有两个问题。

1. 我想在页面加载时加载模式，所以我使用了以下内容 方法

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

   这样做好还是有更好的方法？

2. 我在模态框的顶部有标题，在模态框的末尾有一个按钮 页。所以当我们滚动时，Title 和 Button 应该是粘性的

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

   如何使标题和按钮具有粘性？

如有任何帮助或建议，我们将不胜感激。

提前致谢

Answer 1

一种方法是将 height 分配给您在标题和按钮中间设置的可滚动元素。这样，您可以使用 overflow-y: scroll 让溢出的内容变得可滚动，而您的标题和按钮分别保留在顶部和底部。

参见fiddle：http://jsfiddle.net/27chr463/

Answer 2

我已经包裹了bodal的正文内容并给出了固定的高度。 对于模态打开，您可以使用下面的方法

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

参考：https://fancyapps.com/fancybox/3/docs/#usage

请检查以下内容link。 http://jsfiddle.net/ulric_469/g34sdc2k/11/

如果你使用

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

如果您的网站正在跟踪特定元素上的点击事件的数量，那么就会出现问题。所以我会建议不要在这里使用触发事件。