A better noscript (JavaScript Disabled)

The current "JavaScript is required" message is hidden behind the main menu. This might depend on the theme you are using. Regardless, the following seems to work better. The message is right in the middle of the screen when JavaScript is disabled. Simply paste the following into your main body injection.

<noscript>
    <style>
        /* Styles to create a modal-like overlay */
        -disabled-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }
        -disabled-message {
            background-color: ;
            padding: 20px;
            border-radius: 5px;
            text-align: center;
            color: red;
        }
    </style>
</noscript>
    <script>
        // JavaScript to remove the overlay when JS is enabled
        document.addEventListener('DOMContentLoaded', function() {
            var jsDisabledOverlay = document.getElementById('js-disabled-overlay');
            if (jsDisabledOverlay) {
                jsDisabledOverlay.parentNode.removeChild(jsDisabledOverlay);
            }
        });
    </script>
    <div id="js-disabled-overlay">
        <div id="js-disabled-message">
            <p>JavaScript is required to use this website.</p>
        </div>
    </div>
  • 164
  • More
Replies (0)
Login or Join to comment.