麻烦添加隐藏的描述到CSS / JS图库

时间:2016-02-20 22:26:46

标签: javascript html css image gallery

业余人士。这是我的第一篇文章。

我一直在这个"advanced imagery gallery" tutorial上构建,为我的网站添加一系列作品。我也利用这个机会教自己更多的CSS。这是我第一次使用JV。

但是它的工作原理。

本教程将图像描述拉入模态窗口,并使用下面的图像显示在图像下方。

$('#saveAlert .close').on('click', function () {

  $("#saveAlert")
    .addClass('faded');

});

我想通过添加仅在模态内显示在图像右侧的文本来解释我的投资组合中的工作。为了做到这一点,我在

下面创建了一个新的div类
/* Description of Image */
div.desc {
    padding: 15px;
    text-align: center;
}

然后我指定它在激活模态之前隐藏在页面上。

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
    position: absolute;
    top: 100px;
    right: 50px;
}

在身体里,我写了下面的内容来展示这项工作。问题是,当我点击模态时,文本不显示。最初,此代码在图像下方放置了一段描述。一旦我添加"显示:无"它消失了(胜利!)。但它仍未出现在模态窗口中(失败)。

/* Caption of Image */
div.caption {
    padding: 15px;
    text-align: left;
    display: none;
}

我没有触及教程代码的JS部分。可以安全地假设在原始教程代码中没有更改(超出化妆品)。请参考that code填写我的解释中的任何空白 - 我希望不会太多。

谢谢!

0 个答案:

没有答案