The content of the table of contents appears on the page

I’m trying to set up a few lightboxes on a website and it’s my first time working with featherlight

Under Installation
it says to link to jQuery, as well as featherlight.js and featherlight.css

Under Usage
it says that this link should open the content in a lightbox:

Open element in lightbox
This div will be opened in a lightbox

It seems to work, except the div
appears on the page even before the button is clicked. I don’t see anything about adding manual CSS/jQuery to override this, but maybe I’m missing something?

I’ve included a fiddle here:

On the demo page
the technique you are using is also used. The difference is that they give their lightbox div the class lightbox
and then set that class to display: none
so your code would look like this:

.lightbox {
  display: none;

Open element in lightbox

Explanation: display: none
is still actually present on the displayed lightbox (check with dev tools). It just doesn’t have priority (which it would have if you used id selectors in your css).

Hello, buddy!稿源:Hello, buddy! (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » The content of the table of contents appears on the page

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录