HTML code for a popup message which display in the right bottom section

Solution

This code is used to generate a colurful popup message on right bottom of the record. This can be added to a inline html field. This alert will be displayed as a popup and will be removed in 7 secs

Code

<!DOCTYPE html>
<html>
<head>
    <title>Fading Floating Alert</title>
    <style>
        .floating-alert {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #E4287C;
            border: 1px solid #ddd;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            font-size: 18px;
            color: #FFF;
            display: flex;
            align-items: center;
            animation: fadeInUp 0.5s ease;
            transition: opacity 0.5s ease;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .floating-alert svg {
            width: 32px;
            height: 32px;
            margin-right: 10px;
            fill: #FFF;
        }

        .floating-alert span {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <!-- Your other HTML content goes here -->

    <script>
        function showFadingFloatingAlert() {
            const value = `
                <div class="floating-alert">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 22c-5.523 0-10-4.477-10-10S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-17.172c-.45 0-.828.308-.936.726L11 8.524V16h2V8.524l-.064-.97c-.056-.85-.737-1.51-1.54-1.512zM11 18h2v2h-2v-2z" />
                    </svg>
                    <span>Insufficient Customer Credit Limit</span>
                </div>
            `;

            const alertElement = document.createElement('div');
            alertElement.innerHTML = value;
            document.body.appendChild(alertElement);

            setTimeout(() => {
                alertElement.style.opacity = '0';
                setTimeout(() => {
                    alertElement.remove();
                }, 500);
            }, 7000);
        }

        showFadingFloatingAlert();
    </script>
</body>
</html>

Leave a comment Cancel reply