溫馨提示×

javascript怎么使用alert實現(xiàn)一個精美的彈窗

小億
238
2024-03-18 20:20:48
欄目: 編程語言

要實現(xiàn)一個精美的彈窗，你可以使用CSS樣式來美化alert彈窗的外觀。以下是一個示例代碼：

<!DOCTYPE html>
<html>
<head>
<style>
.alert {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.alert h2 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.alert p {
  margin: 10px 0;
  font-size: 16px;
  color: #666;
}

.alert button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.alert button:hover {
  background-color: #0056b3;
}
</style>
</head>
<body>

<button onclick="showAlert()">Show Alert</button>

<script>
function showAlert() {
  var modal = document.createElement('div');
  modal.className = 'alert';
  modal.innerHTML = '<h2>Welcome!</h2><p>This is a beautiful alert box.</p><button onclick="closeAlert()">Close</button>';
  document.body.appendChild(modal);
}

function closeAlert() {
  document.querySelector('.alert').remove();
}
</script>

</body>
</html>

在上面的示例中，我們定義了一個樣式為alert的彈窗，并通過JavaScript動態(tài)創(chuàng)建了這個彈窗。點擊按鈕時會顯示這個彈窗，點擊彈窗上的按鈕可以關閉彈窗。你可以根據需求修改樣式和內容，實現(xiàn)更加精美的彈窗效果。

0 踩