Show a confirmation popup in javascript
problem
You’re creating a dynamic web page that asks the user for a confirmation. For example let’s imagine a user interface with a table of items that you can edit or delete each one. Before deleting an item, you wish to double check with the user if they’re sure to proceed with taking this action. By using JavaScript, we can accomplish this piece of logic.
solution
JavaScript comes out of the box with a function for showing a confirmation popup. It is the confirm() function as shown below in an example.
function confirm_popup()
{
let response = confirm("Do you accept?");
if (response == true)
{
console.log("ok");
}else {
console.log("no");
}
}
The confirm function returns a Boolean value that is either True or False. If it’s True the code above print in the console of JS the message “ok” or “no” respectively.
In order to execute the piece of JavaScript above, let’s put it in an HTML file that will have a button and call that function when it’s clicked. The code is shown below:
<html>
<head>
<script type="text/javascript">
function confirm_popup()
{
let response = confirm("Do you accept?");
if (response == true)
{
console.log("ok");
}else {
console.log("no");
}
}
</script>
</head>
<body>
<input type="button" value="confirm" onclick="confirm_popup()"/>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
output
Open the page in a web browser and click on the confirm button. It should show the popup like below:
Now, open the web developer tools of your browser and navigate to the console. Depending on the user response from the popup, it should show the message ok or no
conclusion
Simply in JavaScript we can use the confirm function to show a default pop up for confirmation. There are better ways for showing more user friendly popups but this is one of the simplest. You can see it live by clicking below: