To achieve the desired functionality, you can use JavaScript to create a popup modal and set a timeout function to close it after a certain amount of time.
Here’s an example of how you can modify your code to achieve this:
<button id=”save-btn”>Save</button>
<!– Modal –>
<div id=”myModal” class=”modal”>
<div class=”modal-content”>
<p>Record saved successfully</p>
</div>
</div>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
// Get the modal
<script>
var modal = document.getElementById(“myModal”);
// Get the button that opens the modal
var btn = document.getElementById(“save-btn”);
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = “block”;
setTimeout(function() {
modal.style.display = “none”;
}, 3000); // 3000 milliseconds = 3 seconds
}
</script>
In this code, we’re first getting a reference to the modal and the button that opens it using their respective IDs. Then, when the user clicks the button, we’re setting the display property of the modal to “block” to show it.
Next, we’re using the setTimeout function to delay the execution of a function that sets the display property of the modal back to “none” after 3000 milliseconds (or 3 seconds). This has the effect of closing the modal after a few seconds.
Note that you can adjust the timeout value to suit your needs.