bootstrapdialog弹窗
时间: 2023-05-28 13:03:27 浏览: 86
BootstrapDialog是一个基于Bootstrap的弹窗插件,可以轻松地创建各种类型的弹窗,包括警告框、确认框、输入框、提示框等等。
使用BootstrapDialog非常简单,只需引入相应的CSS和JS文件,然后在页面中调用相应的方法即可。
以下是一个示例代码,创建一个警告框:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BootstrapDialog Demo</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.4/css/bootstrap-dialog.min.css">
</head>
<body>
<button class="btn btn-primary" onclick="showDialog()">显示警告框</button>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.4/js/bootstrap-dialog.min.js"></script>
<script>
function showDialog() {
BootstrapDialog.alert({
title: '警告',
message: '您确定要执行此操作吗?',
type: BootstrapDialog.TYPE_WARNING
});
}
</script>
</body>
</html>
```
在上面的代码中,我们首先引入了Bootstrap和BootstrapDialog的CSS和JS文件,然后在页面中创建了一个按钮,点击按钮时调用showDialog函数显示一个警告框。
showDialog函数中调用了BootstrapDialog.alert方法来创建警告框,其中传入了标题(title)、消息(message)和类型(type),类型为BootstrapDialog.TYPE_WARNING表示警告类型。最后,在页面底部的script标签中,我们定义了showDialog函数。
除了alert方法,BootstrapDialog还提供了其他方法来创建不同类型的弹窗,具体可以参考官方文档。