右下へメッセージボックスを表示する　コピペjavascript

// 使用例
const messageManager = new MessageManager(3);//最大同時メッセージ数の設定
messageManager.showMessage('最初のメッセージ');
messageManager.showMessage('次のメッセージ');

class MessageManager {
    constructor(maxMessages = 3) {
        this.maxMessages = maxMessages; // 最大表示数
        this.messageContainer = this.createContainer();
        document.body.appendChild(this.messageContainer);
    }

    createContainer() {
        const container = document.createElement('div');
        container.id = 'message-container';
        this.setStyles(container, {
            position: 'fixed',
            bottom: '10px',
            right: '10px',
            zIndex: '9999999',
            transition: 'opacity 0.5s'
        });
        return container;
    }

    setStyles(element, styles) {
        Object.assign(element.style, styles);
    }

    createMessageElement(message) {
        const messageElement = document.createElement('div');
        messageElement.textContent = message;
        this.setStyles(messageElement, {
            backgroundColor: '#333',
            color: '#fff',
            padding: '10px',
            borderRadius: '5px',
            opacity: '0',
            marginBottom: '10px' // メッセージ間の余白
        });
        return messageElement;
    }

    showMessage(message) {
        // 現在のメッセージ数が最大数を超えた場合、一番古いメッセージを削除
        while (this.messageContainer.children.length >= this.maxMessages) {
            const oldestMessage = this.messageContainer.lastChild;
            this.messageContainer.removeChild(oldestMessage);
        }

        const messageElement = this.createMessageElement(message);
        messageElement.style.opacity = '1'; // 初期状態で不透明にする

        this.messageContainer.insertBefore(messageElement, this.messageContainer.firstChild);

        // 3秒後にメッセージを非表示にする
        setTimeout(() => {
            messageElement.style.opacity = '0';
            // 完全に透明になった後にDOMからメッセージエレメントを削除
            setTimeout(() => {
                if (this.messageContainer.contains(messageElement)) {
                    this.messageContainer.removeChild(messageElement);
                }
            }, 500);
        }, 3000);
    }
}