Bootstrap BootstrapDialog 使用详解
Bootstrap BootstrapDialog 是一个基于 Bootstrap 样式的对话框插件，它可以帮助用户快速地创建现代化的对话框。本文将详细讲解 BootstrapDialog 的使用。
安装 BootstrapDialog
BootstrapDialog 的安装非常简单，只需要在 HTML 页面中引入相关的 CSS 和 JavaScript 文件即可：
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.min.css">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.min.js"></script>
使用 BootstrapDialog
使用 BootstrapDialog 可以非常简单地创建对话框，只需要按照以下步骤即可：
- 创建对话框
var dialog = BootstrapDialog.show({
title: 'Hello Dialog',
message: 'This is an example of BootstrapDialog.'
});
- 关闭对话框
dialog.close();
- 按钮回调
var dialog = BootstrapDialog.show({
title: 'Hello Dialog',
message: 'This is an example of BootstrapDialog.',
buttons: [{
label: 'Close',
action: function(dialog) {
dialog.close();
}
}]
});
下面是两个具体的示例：
示例一
在这个示例中，我们将创建一个按钮，当用户点击按钮时会弹出一个对话框。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap BootstrapDialog 使用详解示例一</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.min.css">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.min.js"></script>
</head>
<body>
<button class="btn btn-primary" id="btn-open-dialog">Open Dialog</button>
<script>
$('#btn-open-dialog').click(function() {
var dialog = BootstrapDialog.show({
title: 'Hello Dialog',
message: 'This is an example of BootstrapDialog.',
buttons: [{
label: 'Close',
action: function(dialog) {
dialog.close();
}
}]
});
});
</script>
</body>
</html>
通过在页面上添加一个按钮，当按钮被点击时会弹出一个对话框，对话框中包含一个关闭按钮。
示例二
在这个示例中，我们将创建一个表单，用户可以在表单中输入数据，当用户点击提交按钮时会弹出一个对话框，对话框中会显示用户输入的数据。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap BootstrapDialog 使用详解示例二</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.min.css">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.min.js"></script>
</head>
<body>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="input-name">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="input-email">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" id="btn-submit">Submit</button>
</div>
</div>
</form>
<script>
$('#btn-submit').click(function(event) {
event.preventDefault();
var name = $('#input-name').val();
var email = $('#input-email').val();
BootstrapDialog.show({
title: 'Submitted Data',
message: 'Name: ' + name + '<br>Email: ' + email + '.',
buttons: [{
label: 'Close',
action: function(dialog) {
dialog.close();
}
}]
});
});
</script>
</body>
</html>
通过在页面上添加一个表单和一个提交按钮，当用户提交表单时会弹出一个对话框，对话框中会显示用户输入的数据。
以上是 Bootstrap BootstrapDialog 使用详解的完整攻略，希望对你有所帮助。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Bootstrap BootstrapDialog使用详解 - Python技术站
微信扫一扫 
支付宝扫一扫 