📌  相关文章
📜  javascript中的警报和提示(1)

📅  最后修改于: 2023-12-03 15:01:48.269000             🧑  作者: Mango

JavaScript中的警报和提示

在JavaScript中，我们可以在网页上弹出提示框，以便于向用户传达一些信息或收集用户信息。常见的提示框有警报框和确认框。

警报框

警报框可以用来向用户提醒一些重要信息或者需要用户确认的操作，例如删除操作等。警报框有一个“确定”按钮，用户点击后警报框将关闭。

语法
alert("警报信息");
示例
alert("您还未登录，请先登录！");

Alert示例

确认框

确认框可以用来让用户确认一个操作是否要继续，例如删除某个重要数据等。确认框有“确定”和“取消”两个按钮，用户点击后，会根据用户的选择进行相应的操作。

语法
confirm("确认信息");
示例
if (confirm("确认删除吗？")) {
    // 执行删除操作
} else {
    // 用户取消删除操作
}

Confirm示例

自定义弹窗

除了系统提供的警报框和确认框外，我们还可以自定义一个弹窗，以便更好地满足自己的需求。自定义弹窗有很多方式实现，例如使用jQuery的UI组件、Bootstrap Modal等，这里我们只讲述最简单的方式——使用JavaScript的DOM操作来实现。

语法
var modal = document.getElementById("弹窗id");
// 显示弹窗
modal.style.display = "block";
// 隐藏弹窗
modal.style.display = "none";
示例
<!DOCTYPE html>
<html>
<head>
	<title>自定义弹窗</title>
	<style>
		/* 弹窗样式 */
		.modal {
			display: none; /* 默认隐藏 */
			position: fixed;
			z-index: 1;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: auto;
			background-color: rgba(0,0,0,0.4); /* 黑色半透明背景 */
		}
		/* 弹窗内容样式 */
		.modal-content {
			background-color: #fefefe;
			margin: 10% auto;
			padding: 20px;
			border: 1px solid #888;
			width: 80%;
			text-align: center;
			border-radius: 10px;
		}
	</style>
</head>
<body>

<h2>点击按钮显示自定义弹窗</h2>

<!-- 自定义弹窗 -->
<div id="myModal" class="modal">
	<div class="modal-content">
		<h3>自定义弹窗</h3>
		<p>这是一个自定义弹窗。</p>
		<button onclick="hideModal()">关闭</button>
	</div>
</div>

<!-- 触发弹窗的按钮 -->
<button onclick="showModal()">显示弹窗</button>

<script>
	// 获取弹窗元素
	var modal = document.getElementById("myModal");
	
	// 显示弹窗
	function showModal() {
	    modal.style.display = "block";
	}
	
	// 隐藏弹窗
	function hideModal() {
	    modal.style.display = "none";
	}
</script>

</body>
</html>

自定义弹窗示例

以上就是JavaScript中的警报和提示的介绍，警报框、确认框和自定义弹窗分别适用于不同的场景，可以根据自己的需求选择合适的方式来实现。