Question

我正在尝试使用Featherlight灯箱作为HTML页面上的“帮助”工具，但无法设法使灯箱内容从页面中消失。

这是我的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Website</title>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="//cdn.rawgit.com/noelboss/featherlight/1.5.0/release/featherlight.min.css" type="text/css" rel="stylesheet" />

</head>
<body>
    <a href="#" data-featherlight="#mylightbox">Help</a>
    <div id="mylightbox">hello</div>
    <div>
        <select id="question">
            <option>yes</option>
            <option>no</option>
        </select>
        <input id="input" type="text" size=45>
    </div>

    <script src="script1.js"></script>
    <script src="//code.jquery.com/jquery-latest.js"></script>
    <script src="//cdn.rawgit.com/noelboss/featherlight/1.5.0/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

CSS：

#input, #question {
    position: relative;
    top : 120px;
}

#lightbox {
    display: none;
}

@media print {
    #input, #question {
        display: none;
    }
}

为什么“hello”会一直出现在页面上？它应该只在灯箱里。

Featherlight灯箱：删除内容

0 个答案: