How do I hide the modal after 5 seconds?

Joined
May 31, 2023
Messages
2
Reaction score
0
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>
 
Joined
Jul 4, 2023
Messages
406
Reaction score
47
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>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,818
Messages
2,569,727
Members
45,661
Latest member
NadineBour

Latest Threads

Top