Show display pop-ups for some second & after some second it will be automatically hidden

Question

Show display pop-ups for some second & after some second it will be automatically hidden.

Is there any way in CSS? I don't want in javascript.

You WANT to do it in CSS and JS is not an option or you thought it would be best in CSS? — hansTheFranz, Jul 30 '17 at 09:48
Possible duplicate of [How can I auto hide alert box after it showing it?](https://stackoverflow.com/questions/15466802/how-can-i-auto-hide-alert-box-after-it-showing-it) — Nayantara Jeyaraj, Jul 30 '17 at 09:48
Guys, I want this pop up in CSS. If it possible please answer. — Darshan Rathod, Jul 30 '17 at 10:10
@kravisingh Why do you asking OP to show code when he/she has no clue how to implement popup hiding via CSS? — Vadim Ovchinnikov, Jul 30 '17 at 10:27

Vadim Ovchinnikov · Accepted Answer · 2017-07-30T10:30:31.750

1

You can use CSS animations to achieve this.

.popup {
  /* apply 3 second hiding animation after 10 second delay */
  animation: hide 3s 10s forwards;

  /* fix popup at the center of screen, optional style */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  padding: 20px;
  /* dimming entire screen except popup */
  outline: 100vmax solid #ccc;
}

@keyframes hide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

<div class="popup">
  This is popup
</div>

edited Jul 30 '17 at 10:30

answered Jul 30 '17 at 10:22

Vadim Ovchinnikov

13,327
5
62
90

Snippet is not running for me, and you do not show how to launch the popup from say a button. – Vanquished Wombat Jul 30 '17 at 10:52
@VanquishedWombat Snippet is running (there are 10 sec delay before `.popup` hides). To launch popup from button you just need primitive JavaScript (except some `:target` link or other hacks). My answer is literally showing and hiding popup after delay. OP didn't ask about button interaction or showing it after some event. – Vadim Ovchinnikov Jul 30 '17 at 10:55
yes you have the right answer I concur. However, may I recommend you add a delay of 2 secs, then display the popup, then hide it after 5 secs. This will give the OP exactly what he requires. – Vanquished Wombat Jul 30 '17 at 12:09
@VanquishedWombat Well, if OP will also need additional delay, I'll add it. – Vadim Ovchinnikov Jul 30 '17 at 12:13
Ok. My point is that the snippet you made is not specifically a popup. It is just a div that disappears by a transition. Whilst that is the gist that the OP 'seems' to need, he does say 'Show display pop-ups for some second & after some second it will be automatically hidden'. So I reckon you are 50% there ;-). – Vanquished Wombat Jul 30 '17 at 13:13

Show display pop-ups for some second & after some second it will be automatically hidden

1 Answers1