Question

我想在我的网站上创建一个黑色的窗帘，但我希望它只在有人点击此按钮时出现：

<a href="#dailyBriefOverlay" id="dailyBriefOverlay" class="pull-right btn-reservar">
    <span class="fa fa-ticket"></span>
</a>

我无法创建效果，只有在点击时才会出现。

我创建了div

    <div class="overlay" id="dailyBriefOverlay">
        <p>test</p>
    </div>

并设置css：

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,.85);
    z-index: 99999;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 8%;
}

有任何jquery有帮助吗？

http://qz.com/此网站有此效果，如果您点击邮件图标，则会出现该窗口。

非常感谢任何帮助。

Answer 1

我认为它现在总是显示出来。

将您的css更改为以下行：

display:none;

现在，使用jQuery在单击按钮时显示它：

<script>
  $("#dailyBriefOverlay").click(function() {
       $(".overlay").show();
  });
</script>

如果单击按钮，它首先检查按钮的id（dailyBriefOverlay）。如果是，则设置display：none;要显示的属性：类的块（叠加）

Answer 2

您可以使用纯CSS实现此任务。对.overlay使用:target伪类仅在其使用网址哈希定位时才会显示。

为此，您应该先隐藏.overlay，然后使用.overlay:target选择器来显示它。另外，请确保从链接中删除重复的id="dailyBriefOverlay"。

＆＃13;

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,.85);
    z-index: 99999;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 8%;
    display: none;   /* hide it */
}
.overlay:target {
    display: block;  /* show it if it's a target */
}

＆＃13;

<a href="#dailyBriefOverlay" class="pull-right btn-reservar">
    <span class="fa fa-ticket"></span>
    Click
</a>

<div class="overlay" id="dailyBriefOverlay">
    <p>test</p>
</div>

＆＃13;

使用这种纯CSS方法，它也很容易添加一些不错的CSS转换。例如，如下面的演示。

＆＃13;

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    width: 100%;
    background-color: rgba(0,0,0,.85);
    z-index: 99999;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 8%;
    transition: height .4s ease;
}
.overlay:target {
    height: 100%;
}

＆＃13;

<a href="#dailyBriefOverlay" class="pull-right btn-reservar">
    <span class="fa fa-ticket"></span>
    Click
</a>

<div class="overlay" id="dailyBriefOverlay">
    <p>test</p>
    <p><a href="#">Close</a></p>
</div>

＆＃13;

Answer 3

$('.btn-reservar').on('click',function(){
    $('.overlay').animate({
       top: 10px, // or any value you want it to go to.
       display: block,
       atr: val// Any other value to change to.
}, 2000); // time in MS how long the animation lasts.
});

认为这样做是

Answer 4

$(document).ready(function () {
    $("div#dailyBriefOverlay").hide();
    
    $("a#daailyBriefOverlay").click(function(){
        $("div#dailyBriefOverlay").show();
    });
});

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,.85);
    z-index: 99999;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 8%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay" id="dailyBriefOverlay">
    <p>test</p>
</div>

<a href="#dailyBriefOverlay" id="daailyBriefOverlay" class="pull-right btn-reservar">
    <span class="fa fa-ticket"></span>
    Click Me
</a>

你应该使用JQuery。见运行示例！

如何创建仅在单击按钮时出现的黑色窗帘？

4 个答案: