How do I hide the modal after 5 seconds?

isaactrichka · Jun 1, 2023

I've tried the code below but it doesn't work. I’m trying to get the modal to popup with an onclick event as it normally would but then I want it to disappear after about 5 seconds and hide the ability to allow the user from making it hide.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Hide DIV Elements after 10 seconds</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function() {
setTimeout(function() { $("#testdiv").fadeOut(1500); }, 5000)
$('#btnclick').click(function() {
$('#testdiv').show();
setTimeout(function() { $("#testdiv").fadeOut(1500); }, 5000)
})
})
</script>
<style type="text/css">
.content
{
border: 2px solid Red;
color: #008000;
padding: 10px;
width: 400px;
font-family:Calibri;
font-size:16pt
}
</style>
</head>
<body>
<input type="button" id="btnclick" value="Show DIV" />
<div class="content" id="testdiv" class="">
Hi, Welcome to Aspdotnet-Suresh.com
It will disappear in 4 seconds!
</div>
</body>
</html>

BigDady · Jun 1, 2023

I just placed this into VScode and it works for me using firefox.

isaactrichka · Jun 7, 2023

It won't work for Chrome

BigDady · Jun 8, 2023

Just tried it in Chrome and it works. Purge your browsers storage.

VBService · Jul 18, 2023

Check this ...

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>jQuery Hide DIV Elements after 5 seconds</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <style>
      .content {
        display: none;
        border: 2px solid Red;
        color: #008000;
        width: 300px;
        padding: 1rem;
        font-family: Calibri;
        font-size: 1em;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <input type="button" id="btnclick" value="Show DIV" />
    <div class="content" id="testdiv">
        <div>Hi, Welcome to Aspdotnet-Suresh.com</div>
        <div>It will disappear in <span></span> seconds!</div>
    </div>

    <script>
      $(document).ready(
        $('#btnclick').click(function() {
          const TIME_TO_DISAPPEAR = 5; // in seconds
          $("#testdiv span").text(TIME_TO_DISAPPEAR);
          $('#testdiv').show();
         
          const id = setInterval(function() {
            $("#testdiv span").text(--i);
            if (i == 0) {
              clearInterval(id);
              $("#testdiv").fadeOut(1500);
            }
          }, 1000, i=TIME_TO_DISAPPEAR);
        })
      );
    </script>
  </body>
</html>

How do I fix this issue in sqaurespace code block?	1	Jul 2, 2024
Php modal form to email	1	Aug 28, 2024
Uhhhhh, What can I do next?	6	Nov 25, 2023
How to have two html audio players on one page?	0	May 3, 2022
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
I am trying to make an audio player, how do I get the selected file to be playable?	5	Mar 29, 2022
How can I arrange a series of radio buttons?	2	Jan 25, 2024
Fading effect between play and play-over and pause and pause-over	0	Oct 16, 2021

How do I hide the modal after 5 seconds?

isaactrichka

BigDady

isaactrichka

BigDady

VBService

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads