📌  相关文章
📜  js 警报格式文本 - Javascript (1)

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

JS 警报格式文本 - Javascript

在Web开发中，警报往往被用于提示用户或应用程序中的错误或警告。Javascript提供了一种简便的方法来创建警报，可以使用alert()函数。

alert()函数

alert()函数是一个JavaScript内置函数，用于在浏览器中弹出一个警告框。它有一个必需的参数，即要在警告框中显示的文本。

语法
alert("警告文本")
示例
alert("此操作无法撤消！")
输出

alert-example

模态框

除了 alert() 函数，我们还可以使用模态框来实现更多的警告效果。模态框是一个浮动的窗口，它遮罩了网页的其余部分，并且需要关闭它才能进行下一步的操作。

Bootstrap 模态框

Bootstrap 是一个流行的Web开发框架，它提供了丰富的UI组件，包括模态框。我们可以在Bootstrap的官网上找到模态框的代码，然后将其添加到我们的HTML代码中。

语法
<!-- 模态框按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  打开模态框
</button>

<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">模态框标题</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        模态框正文
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>
示例
<!DOCTYPE html>
<html>
<head>
	<title>Bootstrap 模态框示例</title>
	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

	<div class="container">
		<h1>Bootstrap 模态框示例</h1>
		<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
		  打开模态框
		</button>

		<!-- 模态框 -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <h4 class="modal-title" id="myModalLabel">模态框标题</h4>
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		      </div>
		      <div class="modal-body">
		        这是一个模态框。
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		        <button type="button" class="btn btn-primary">保存</button>
		      </div>
		    </div>
		  </div>
		</div>
	</div>

	<!-- jQuery -->
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<!-- Bootstrap JavaScript -->
	<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
输出

bootstrap-modal-example

总结

警报是Web开发中非常常见的一种UI组件，JavaScript提供了多种方式来实现警报。开发人员可以根据具体需求选择不同的方法来实现。在选择时，需要充分考虑用户体验和交互性。