javascript - 如何在几秒钟后将动画 gif 显示为弹出窗口和警报

Question

我有一个 HTML 页面，不幸的是我对它知之甚少。在我的 HTML 页面中，有一个简单的按钮可以重定向到另一个网站。我想做的是显示一个弹出窗口，告知用户他正在移动到另一个站点。如果他接受，那么他将被重定向，如果不接受，他将留在页面中。

我已经为之前描述的所有过程制作了一个图形，它是一个简单的 gif 动画。我想做的是:

用户点击按钮gif 动画弹出(如果可能的话，所有背景都是不可点击的深色)2 秒后，gif 旁边会弹出警报。

我有一个我想做的例子。 http://imgur.com/8dAf3Xp

Answer 1

试试我在 js fiddle 中创建的这个示例

fiddle

我使用 2 个重叠的 div 来实现这一点，等待 2 秒，弹出窗口将自动显示。

希望这有帮助:)

HTML

    <div id = "pop-out">
    <div id = "message">
        Message goes here
        <button class = "ok"> Ok </button>
    </div>
</div>
<div id = "container">
    Content goes here 
    <button>You can't click me</button>
</div>

CSS

div#pop-out {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(255,255,255,.2);
    width: 100%;
    height: 100%;
    z-index: 1;
    display: none;
}
div#message {
    width: 50%;
    height: 100px;
    margin: 0 auto;
    border: 1px solid red;
    text-align: center;
    line-height: 100px;
}

jQuery

$(document).ready(function(){
    setTimeout(function(){
              $("#pop-out").show();     
       },2000);

    $("button.ok").click(function(){
        $("#pop-out").hide();
    });
});