当前位置：首页 > JavaScript

js 实现dialog

2026-03-15 10:33:06JavaScript

使用 `<dialog>` 元素实现基础弹窗

HTML5 提供了原生 <dialog> 元素，可以直接通过 JavaScript 控制：

<dialog id="myDialog">
  <p>这是一个原生 dialog 弹窗</p>
  <button onclick="document.getElementById('myDialog').close()">关闭</button>
</dialog>

<button onclick="document.getElementById('myDialog').showModal()">打开弹窗</button>

通过 CSS 和 JavaScript 自定义弹窗

如果需要更灵活的样式控制，可以通过 CSS 和 JavaScript 实现：

<div class="dialog-container" id="customDialog">
  <div class="dialog-content">
    <span class="close-btn">&times;</span>
    <h3>自定义弹窗标题</h3>
    <p>弹窗内容区域</p>
  </div>
</div>

<style>
.dialog-container {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
}

.dialog-content {
  background-color: #fff;
  margin: 15% auto;
  padding: 20px;
  width: 80%;
  max-width: 500px;
}

.close-btn {
  float: right;
  cursor: pointer;
}
</style>

<script>
const dialog = document.getElementById('customDialog');
const closeBtn = document.querySelector('.close-btn');

// 打开弹窗
function openDialog() {
  dialog.style.display = 'block';
}

// 关闭弹窗
closeBtn.addEventListener('click', () => {
  dialog.style.display = 'none';
});

// 点击外部关闭
window.addEventListener('click', (e) => {
  if (e.target === dialog) {
    dialog.style.display = 'none';
  }
});
</script>

使用第三方库实现高级弹窗

对于更复杂的需求，可以考虑使用以下流行库：

SweetAlert2

Swal.fire({
  title: '提示',
  text: '操作成功',
  icon: 'success',
  confirmButtonText: '确定'
});

Modal.js (Bootstrap)

// 需要引入Bootstrap
$('#myModal').modal('show');

Dialog Polyfill 为不支持原生 <dialog> 的浏览器提供兼容：
```
dialogPolyfill.registerDialog(dialogElement);
```

实现可拖拽弹窗

为自定义弹窗添加拖拽功能：

const dialogContent = document.querySelector('.dialog-content');
let isDragging = false;
let offsetX, offsetY;

dialogContent.addEventListener('mousedown', (e) => {
  if (e.target === dialogContent || e.target.tagName === 'H3') {
    isDragging = true;
    offsetX = e.clientX - dialogContent.getBoundingClientRect().left;
    offsetY = e.clientY - dialogContent.getBoundingClientRect().top;
  }
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;

  dialogContent.style.left = `${e.clientX - offsetX}px`;
  dialogContent.style.top = `${e.clientY - offsetY}px`;
});

document.addEventListener('mouseup', () => {
  isDragging = false;
});

弹窗动画效果

添加 CSS 过渡动画：

js 实现dialog

.dialog-content {
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}