How to close pop up automatically after n seconds?

Denis Shishkin2017-10-24 23:04:51

css

Denis Shishkin, 2017-10-24 23:04:51

I'm trying to make it so that after submitting the contact form, a pop-up window appears with a notification of the success of the operation. The first part was executed with the following code:

function slug_post_form_submit( obj ) {
    jQuery('#success-message').show();
}

The html code of the popup itself:

<section id="success-message">
   <div class="popup"> <h2>Успешно!</h2>
   </div>
</div>

The CSS is something like this:

.popup {
    position: absolute;
    top: 27%;
    left: 0;
    right: 0;
    width: 490px;
    margin: auto;
    height: 366px;
    background: #fff;
}
#success-message {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.56);
    z-index: 999!important;
    background: rgba(40, 69, 113, 0.4);
}
#success-message {
    display: none;
}

After sending, the popup appears, everything is fine, but the problem is that I can’t make it disappear automatically after 2 seconds, for example, and so that a person clicking outside the window (on the overlay) can also close this popup.
I found such a code on the net, but maybe because I don’t have enough knowledge of js, I don’t insert it correctly, since nothing works

setTimeout(function() { $("#success-message").hide('slow'); }, 2000);

I ask for your help)

Answer the question

In order to leave comments, you need to log in

10 answer(s)

SagePtr, 2019-07-26
@SagePtr

On both sites, horizontal scrolling appeared on a 1366x768 monitor. Didn't look further.

ThunderCat, 2019-07-26
@ThunderCat

the first is good, but 2 points are confusing:
firstly, the hamburger menu in the desktop
; secondly, something is missing in the visual, like the "a lot of air and spots" style, but it somehow doesn't look... In short, a purely personal perception, without specifics, Alas.
Second - subjectively like it, but it is the lack of an adaptive that is a huge minus. Make at least a scale for the viewport ...

AntonHocok, 2019-07-27
@AntonHocok

Everything is cool, I like it, only on mobile it was possible not to limit the width of the container so much) and fixed to adapt, good luck in development)

CelDenP, 2019-07-26
@CelDenP

block how the classes are held in the mobile version, it would be better to make a slider (slick slider, etc.).
on the "fix" page I have horizontal scrolling on my hd monitor, but the design itself impressed me.
try in the head on the 2nd site add:

<meta name="viewport" content="width=device-width, initial-scale=1">

then horizontal scrolling may be gone

Gasgolder, 2019-07-28
@Gasgolder

I opened it only on a mobile phone, the second one should be adapted. At first, I would remove the outline from the buttons. and here is the link to the picture

ThunderCat, 2017-10-24
@ThunderCat

$("#success-message"). ~~hide~~ fadeOut(2000);

Roman, 2017-10-24
@r0n1x

<body>
  <section id="successMessage">
    <div class="popup">
      <h2>Успешно!</h2>
    </div>
  </section>
  <script type="text/javascript" charset="utf-8">
    setTimeout(() => successMessage.hidden = true, 2000)
  </script>
</body>

link

lexstile, 2017-10-25
@lexstile

// 1
      jQuery('#success-message').show();
      setTimeout(function(){ jQuery('#success-message').hide(); }, 3500);
      // 2 этот не проверял, не могу сказать, будет ли работать
      jQuery('#success-message').show(0).delay(1000).hide(0);

Denis Yanchevsky, 2017-10-25
@deniscopro

Have you already tried that?

jQuery('#success-message').show('normal', function() {
    setTimeout(function() { jQuery("#success-message").hide('slow'); }, 2000);
});

Anton Bondarenko, 2018-02-04
@antbo

Watch out for $ and jQuery at the start of requests. Older versions don't support the $("#div"). fadeOut(); format. , instead of jQuery(“#div”). fadeOut();