Bootstrap框架toastr.js组件实现弹出提示框

Bootstrap框架相比都不陌生了吧,我们在开发过程种都会使用到一些组件,那么今天我们教大家使用Bootstrap框架里的toastr.js组件实现弹窗、(错误、正确、警告提示框)

引入Bootstrap的toastr.js组件必要文件:

一共两种方法添加必要文件(任选其一):

放进HTML文件

<!-- 引入Bootstrap CSS文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">

<!-- 引入toastr CSS文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/toastr.js/latest/toastr.min.css">

<!-- 引入jQuery文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- 引入Bootstrap JS文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>

<!-- 引入toastr JS文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/toastr.js/latest/toastr.min.js"></script>

放进JS里的文件

// 引入Bootstrap CSS文件
import 'https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css';
// 引入toastr CSS文件
import 'https://cdn.bootcdn.net/ajax/libs/toastr.js/latest/toastr.min.css';
// 引入jQuery文件
import $ from 'https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js';
// 引入Bootstrap JS文件
import 'https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js';
// 引入toastr JS文件
import toastr from 'https://cdn.bootcdn.net/ajax/libs/toastr.js/latest/toastr.min.js';

// 在这里可以使用 $ 和 toastr 了

需要点击弹窗的按钮:

	<div class="container">
		<h1>使用Bootstrap框架toastr.js组件的弹窗功能</h1>
		<button class="btn btn-primary" onclick="showSuccess()">显示成功信息</button>
		<button class="btn btn-warning" onclick="showWarning()">显示警告信息</button>
		<button class="btn btn-danger" onclick="showError()">显示错误信息</button>
	</div>

弹窗后的内容:

		// 显示成功信息
		function showSuccess() {
			toastr.success('操作成功!');
		}
		// 显示警告信息
		function showWarning() {
			toastr.warning('请注意,您的操作可能会导致数据丢失!');
		}
		// 显示错误信息
		function showError() {
			toastr.error('操作失败,请稍后再试!');
		}
	

演示图:

Bootstrap框架toastr.js组件实现弹出提示框

Bootstrap框架toastr.js组件实现弹出提示框

Bootstrap框架toastr.js组件实现弹出提示框

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

给TA打赏
共{{data.count}}人
人已打赏
css3html5前端

CSS3+HTML5实现开关动态特效按钮

2023-5-3 12:25:20

前端

利用Pjax实现网页无刷新加载的方法

2023-5-8 22:16:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索