js 实现msgbox

实现简单的MsgBox功能

在JavaScript中实现类似MsgBox的弹窗功能可以通过多种方式完成，以下是几种常见方法：

使用原生alert()

alert("这是一个简单的消息框");

自定义HTML弹窗

<div id="customMsgBox" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; padding:20px; box-shadow:0 0 10px rgba(0,0,0,0.5); z-index:1000;">
  <p id="msgContent"></p>
  <button onclick="document.getElementById('customMsgBox').style.display='none'">确定</button>
</div>

<script>
function showMsgBox(message) {
  document.getElementById('msgContent').innerText = message;
  document.getElementById('customMsgBox').style.display = 'block';
}
</script>

使用第三方库实现高级MsgBox

SweetAlert2实现

// 先引入SweetAlert2库
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

// 使用示例
Swal.fire({
  title: '提示',
  text: '这是一个更美观的消息框',
  icon: 'info',
  confirmButtonText: '确定'
});

实现带回调函数的MsgBox

function showConfirmBox(message, confirmCallback, cancelCallback) {
  const result = confirm(message);
  if(result && confirmCallback) {
    confirmCallback();
  } else if(!result && cancelCallback) {
    cancelCallback();
  }
}

// 调用示例
showConfirmBox("确定要执行此操作吗？", 
  () => console.log("用户点击了确定"),
  () => console.log("用户点击了取消")
);

实现模态MsgBox组件

class MsgBox {
  constructor() {
    this.box = document.createElement('div');
    this.box.style.cssText = 'position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:none; justify-content:center; align-items:center; z-index:9999;';

    this.content = document.createElement('div');
    this.content.style.cssText = 'background:#fff; padding:20px; border-radius:5px; min-width:300px;';

    this.message = document.createElement('p');
    this.button = document.createElement('button');
    this.button.textContent = '确定';
    this.button.onclick = () => this.hide();

    this.content.appendChild(this.message);
    this.content.appendChild(this.button);
    this.box.appendChild(this.content);
    document.body.appendChild(this.box);
  }

  show(msg) {
    this.message.textContent = msg;
    this.box.style.display = 'flex';
  }

  hide() {
    this.box.style.display = 'none';
  }
}

// 使用示例
const msgBox = new MsgBox();
msgBox.show("这是一个自定义模态消息框");

这些方法提供了从简单到复杂的MsgBox实现方案，可以根据项目需求选择合适的实现方式。原生alert()最简单但样式不可控，自定义HTML弹窗灵活性最高，第三方库则提供了现成的美观解决方案。