How to Show Popup to Enable JavaScript in Browser

 Hi to all, in this article I am going to tell you all about how to show popup to users to enable JavaScript in browser for Blogger, WordPress and other websites easily in just few minutes.

When JavaScript is blocked in the browser, a popup will appear on the screen and ask website users to enable the JavaScript before accessing your website content.

Likewise you can force users to enable JavaScript in the browser settings and once the JavaScript is enabled then automatically the popup will go away and if user again disable the JavaScript then the popup comes again.

This will help you to improve your website security and all the scripts will work in the browser perfectly and it helps especially when you are using anti ad blocker, copy paste disable script and other scripts on your website.

If you add the below provided code in your website then it will auto detect if JavaScript is disable in the browser and shows a popup to your visitors to enable the JavaScript.

Read the below provided steps carefully before adding any code in your website theme editor, so read the complete article till end.

Steps to Force Users to Enable JavaScript in Blogger

Step-1: First of all you need to login to your blogger website dashboard.

Step-2: Now go to blogger dashboard -> Click on theme section -> Click on arrow icon -> Select backup -> Click on download theme.

Step-3: Now again go to blogger dashboard -> Click on theme section -> Click on arrow icon -> Select Edit HTML -> Blogger theme editor.

Step-4: Copy below provided noscript cod and paste the copied noscript code above closing body tag.

<noscript> <style> body, html{overflow:hidden} #JsEnable {display:none} #twNoscript {background:rgba(0,0,0,0.85);padding:0;position:fixed;bottom:0;left:0;top:-100px;right:0;z-index:1000;opacity:1;visibility:visible;height:auto;} #twNoscript svg {width:100px; height:100px} #twNoscript svg path {fill:#fff} #twNoscript .isiNoscript{background-color:#34495E;color:#fff;position:absolute;text-align:center;padding:0 30px 30px 30px;margin:auto;top:30%;left:0;right:0;font-size:1.5rem;font-weight:400;line-height:1.5em;max-width:670px;box-shadow:0 20px 10px -10px rgba(0,0,0,0.15);border:15px solid rgba(0,0,0,.07); overflow:hidden; transition:all .6s cubic-bezier(.25,.8,.25,1); -webkit-transform:translateZ(0); transform:translateZ(0); backface-visibility:visible; transition:all .2s ease-in-out,visibility 0s; transform-origin:bottom center; pointer-events:auto; transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); opacity:1; animation:twWobble .5s; -moz-animation: twWobble .5s; -webkit-animation:twWobble .5s; -o-animation:twWobble .5s} #twNoscript .isiNoscript:hover{box-shadow:0 20px 10px -10px rgba(0,0,0,0.2);} #twNoscript .isiNoscript h4, #twNoscript .isiNoscript .JSEnable{display:inline-block;background:rgba(0,0,0,.07);padding:5px 25px 15px 25px;font-size:2.2rem;font-weight:500;margin-bottom:20px} </style> </noscript> <noscript> <div id='twNoscript'> <div class='isiNoscript'><span class='JSEnable'>Enable Javascript</span> <br/> <svg viewBox='0 0 24 24'> <path d='M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z'/> </svg> <br/>Javascript is disabled on your Browser. To use <data:blog.title.escaped/> turn on Javascript in the browser settings.</div> </div> </noscript>
Copy

Step-5: After adding the code, Click on save button.

Step-6: You have successfully added the code in your blogger website and from now, if any users disables the JavaScript, then a popup message displays and ask to enable it, and it will not go until you enable the JavaScript for the website.

Steps to Force Users to Enable JavaScript in WordPress

Step-1: First of all you all need to login to your WordPress website dashboard by using your login credentials.

Step-2: Here you can use a plugin like Header Footer Code Manager or any other code management plugin or you can directly paste it in the theme editor.

Step-3: Here I am using HFCM Plugin to force users t enable JavaScript in browser.

Step-4: Here open HFCM plugin dashboard.

Step-5: Now click on "Add New Snippet".

Step-6: Here in this page it shows, few textboxes and you need to fill information in those textboxes, and textboxes are:

• Snippet Name
• Site Display
• Exclude Page
• Exclude Posts
• Location
• Device Display
• Status
• Snippet / Code

Step-7: Here you need to enter the information in the boxes like,

Snippet Name: Force Enable JS

Site Display:  Select Site Wide

Exclude Page: -

Exclude Posts: -

Location: Select Footer

Device Display: Select Show on all devices

Status: Select Active

Snippet / Code: Paste the below provided code here

Step-8: Now copy the below provided code and paste the copied code in snippet / code.

<noscript> <style> body, html{overflow:hidden} #JsEnable {display:none} #twNoscript {background:rgba(0,0,0,0.85);padding:0;position:fixed;bottom:0;left:0;top:-100px;right:0;z-index:1000;opacity:1;visibility:visible;height:auto;} #twNoscript svg {width:100px; height:100px} #twNoscript svg path {fill:#fff} #twNoscript .isiNoscript{background-color:#34495E;color:#fff;position:absolute;text-align:center;padding:0 30px 30px 30px;margin:auto;top:30%;left:0;right:0;font-size:1.5rem;font-weight:400;line-height:1.5em;max-width:670px;box-shadow:0 20px 10px -10px rgba(0,0,0,0.15);border:15px solid rgba(0,0,0,.07); overflow:hidden; transition:all .6s cubic-bezier(.25,.8,.25,1); -webkit-transform:translateZ(0); transform:translateZ(0); backface-visibility:visible; transition:all .2s ease-in-out,visibility 0s; transform-origin:bottom center; pointer-events:auto; transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); opacity:1; animation:twWobble .5s; -moz-animation: twWobble .5s; -webkit-animation:twWobble .5s; -o-animation:twWobble .5s} #twNoscript .isiNoscript:hover{box-shadow:0 20px 10px -10px rgba(0,0,0,0.2);} #twNoscript .isiNoscript h4, #twNoscript .isiNoscript .JSEnable{display:inline-block;background:rgba(0,0,0,.07);padding:5px 25px 15px 25px;font-size:2.2rem;font-weight:500;margin-bottom:20px} </style> </noscript> <noscript> <div id='twNoscript'> <div class='isiNoscript'><span class='JSEnable'>Enable Javascript</span> <br/> <svg viewBox='0 0 24 24'> <path d='M3,3H21V21H3V3M7.73,18.04C8.13,18.89 8.92,19.59 10.27,19.59C11.77,19.59 12.8,18.79 12.8,17.04V11.26H11.1V17C11.1,17.86 10.75,18.08 10.2,18.08C9.62,18.08 9.38,17.68 9.11,17.21L7.73,18.04M13.71,17.86C14.21,18.84 15.22,19.59 16.8,19.59C18.4,19.59 19.6,18.76 19.6,17.23C19.6,15.82 18.79,15.19 17.35,14.57L16.93,14.39C16.2,14.08 15.89,13.87 15.89,13.37C15.89,12.96 16.2,12.64 16.7,12.64C17.18,12.64 17.5,12.85 17.79,13.37L19.1,12.5C18.55,11.54 17.77,11.17 16.7,11.17C15.19,11.17 14.22,12.13 14.22,13.4C14.22,14.78 15.03,15.43 16.25,15.95L16.67,16.13C17.45,16.47 17.91,16.68 17.91,17.26C17.91,17.74 17.46,18.09 16.76,18.09C15.93,18.09 15.45,17.66 15.09,17.06L13.71,17.86Z'/> </svg> <br/>Javascript is disabled on your Browser. To use [Enter Website Name] turn on Javascript in the browser settings.</div> </div> </noscript>
Copy

Step-9: Now you can modify the code as per your website and then click on save button.

Step-10: You have successfully added the code in your WordPress website and from now, if any users disables the JavaScript, then a popup message displays and ask to enable it, and it will not go until you enable the JavaScript for the website.

Note:

If you get any error while saving the code in blogger website, then you need to restore your backup code again and need to follow the same process as provided in above steps.

In WordPress you can use a plugin like Header Footer Code Manager or any other code management plugin or you can directly paste it in the theme editor.

Conclusion

I hope that you understood about how to show popup to users to enable JavaScript in browsers for blogger and WordPress websites easily in just few minutes.