如何显示动画gif弹出并在几秒钟后发出警报

Question

I have an HTML page and unfortunatly I don't know much about it. In my HTML page there is a simple button that redirect to another website. What I would like to do is to show a popup that advise the user that he is moving to another site. If he accepts so he is redirected, if not then he stays in page.

I've made a graphic for all the process described before and it is a simple gif animated. what I wanna do is this:

The user click on the button the gif animated pop up (and all the background is unclickable with a dark color if it's possible to do) after 2 seconds the alert pop up next to the gif.

I've an example of what I wanna do. http://imgur.com/8dAf3Xp

Answer 1

Try this sample i created in js fiddle

fiddle

I use 2 overlapping divs to achieved this, wait 2 seconds and the pop-out will automatically show.

Hope this helps :)

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();
    });
});