js写一个弹窗消息提醒插件_js好看的消息提示框

以下是一个简单的消息提示框插件示例，使用JavaScript和CSS实现：

<!-- 在HTML中引入样式文件 -->
<link rel="stylesheet" href="message-box.css">
 
<!-- 引入JavaScript文件 -->
<script src="message-box.js"></script>
 
<script>
// 在JavaScript中调用插件
MessageBox.show('这是一个消息提示框', 'info');
</script>

/* message-box.css 文件内容 */
.message-box {
    /* 样式细节 */
}
 
/* 其他样式 */

// message-box.js 文件内容
var MessageBox = {
    show: function(message, type) {
        // 创建消息框的DOM元素
        var box = document.createElement('div');
        box.className = 'message-box ' + type;
        box.innerHTML = message;
        
        // 将消息框添加到页面上
        document.body.appendChild(box);
        
        // 3秒后关闭消息框
        setTimeout(function() {
            box.parentNode.removeChild(box);
        }, 3000);
    }
};

这个示例中，MessageBox.show 方法接受两个参数：message 是要显示的文本，type 是消息框的类型，比如 'info', 'success', 'error' 等。该方法创建一个带有相应类的 div 元素，并将其添加到 body 中。使用 setTimeout 函数在消息显示3秒后将其移除。这只是一个简单的示例，实际应用中可以根据需要添加更多功能，比如动画效果、更多的类型支持、可配置的持续时间等。