javascript - Managing lightboxes and the content within them

Question

I want to find a better way of managing lightboxes with JS. I'm working in a Rails environment.

I usually put the HTML for lightboxes in my Rails application layout file, then I would simply use JS to show / hide these lightboxes when needed - this is very static. Sometimes I would use jQuery to create the lightbox and the content within it on the fly and then show and hide that, very messy.

Should I be using JS templates for this? I think I want to have several templates that contain different content for lightboxes - with the ability to output variables in these templates.

What's the best way to maintain several lightboxes of different widths / heights and content?

Answer 1

我会完全抽象您的灯箱（不会将任何 html 放入布局中），而是动态生成整个内容并将其附加到正文或指定元素。至于存储不同尺寸的灯箱，我想这取决于您使用的是什么灯箱。它们中的很多都允许您传递一个配置对象，该对象控制尺寸等。这可能是最好的方法，因为您将重用相同的代码，只需为其指定不同的尺寸。