203 lines
6.2 KiB
HTML
203 lines
6.2 KiB
HTML
<!--淘宝店：云码资源优选 https://shop188702750.taobao.com/search.htm?spm=a1z10.1-c.0.0.1221421cqgmNaI&search=y--><!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
|
|
<title>对话框 - 后台管理系统模板</title>
|
|
<link rel="icon" href="favicon.ico" type="image/ico">
|
|
<meta name="keywords" content="后台管理系统HTML模板">
|
|
<meta name="description" content="基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
|
|
<meta name="author" content="yinqi">
|
|
<link href="css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="css/materialdesignicons.min.css" rel="stylesheet">
|
|
<!--对话框-->
|
|
<link rel="stylesheet" href="js/jconfirm/jquery-confirm.min.css">
|
|
<link href="css/style.min.css" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container-fluid p-t-15">
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="card">
|
|
<div class="card-header"><h4>对话框</h4></div>
|
|
<div class="card-body">
|
|
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<button class="btn btn-primary btn-block example-p-1">弹出框示例</button>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<button class="btn btn-primary btn-block example-p-2">确认框示例</button>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<button class="btn btn-primary btn-block example-p-3">对话框示例</button>
|
|
</div>
|
|
<br/><br/><br/>
|
|
<div class="col-md-4">
|
|
<button class="btn btn-primary btn-block example-p-4">错误/红色 对话框</button>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<button class="btn btn-primary btn-block example-p-5">成功/绿色 对话框</button>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<button class="btn btn-primary btn-block example-p-6">警告/黄色 对话框</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script type="text/javascript" src="js/jquery.min.js"></script>
|
|
<script type="text/javascript" src="js/bootstrap.min.js"></script>
|
|
<!--对话框-->
|
|
<script src="js/jconfirm/jquery-confirm.min.js"></script>
|
|
<script type="text/javascript" src="js/main.min.js"></script>
|
|
<script type="text/javascript">
|
|
$('.example-p-1').on('click', function () {
|
|
$.alert({
|
|
title: '嗨',
|
|
content: '这是对用户的简单提示框。 <br> 一些 <strong>HTML</strong> <em>内容</em>',
|
|
buttons: {
|
|
confirm: {
|
|
text: '确认',
|
|
btnClass: 'btn-primary',
|
|
action: function(){
|
|
$.alert('你点击了确认!');
|
|
}
|
|
},
|
|
cancel: {
|
|
text: '取消',
|
|
action: function () {
|
|
$.alert('你点击了取消!');
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
$('.example-p-2').on('click', function () {
|
|
$.confirm({
|
|
title: '对话框',
|
|
content: '一些内容...',
|
|
buttons: {
|
|
confirm: {
|
|
text: '确认',
|
|
action: function(){
|
|
$.alert('确认的!');
|
|
}
|
|
},
|
|
cancel: {
|
|
text: '关闭',
|
|
action: function(){
|
|
$.alert('取消的!');
|
|
}
|
|
},
|
|
somethingElse: {
|
|
text: '其他',
|
|
btnClass: 'btn-blue',
|
|
keys: ['enter', 'shift'],
|
|
action: function(){
|
|
$.alert('其他的选择？');
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
$('.example-p-3').on('click', function () {
|
|
$.confirm({
|
|
title: '提示',
|
|
content: '' +
|
|
'<form action="" class="formName">' +
|
|
'<div class="form-group">' +
|
|
'<label>请输入您的姓名</label>' +
|
|
'<input type="text" placeholder="姓名" class="name form-control" required />' +
|
|
'</div>' +
|
|
'</form>',
|
|
buttons: {
|
|
formSubmit: {
|
|
text: '提交',
|
|
btnClass: 'btn-blue',
|
|
action: function () {
|
|
var name = this.$content.find('.name').val();
|
|
if(!name){
|
|
$.alert('请您输入您的姓名');
|
|
return false;
|
|
}
|
|
$.alert('您的姓名是： ' + name);
|
|
}
|
|
},
|
|
cancel: {
|
|
text: '取消'
|
|
},
|
|
},
|
|
onContentReady: function () {
|
|
var jc = this;
|
|
this.$content.find('form').on('submit', function (e) {
|
|
e.preventDefault();
|
|
jc.$$formSubmit.trigger('click');
|
|
});
|
|
}
|
|
});
|
|
});
|
|
$('.example-p-4').on('click', function () {
|
|
$.confirm({
|
|
title: '错误提示',
|
|
content: '笑江湖浪迹十年游，空负少年头。对铜驼巷陌，吟情渺渺，心事悠悠！酒冷诗残梦断，南国正清秋。',
|
|
type: 'red',
|
|
typeAnimated: true,
|
|
buttons: {
|
|
tryAgain: {
|
|
text: '重试',
|
|
btnClass: 'btn-red',
|
|
action: function(){
|
|
}
|
|
},
|
|
close: {
|
|
text: '关闭'
|
|
}
|
|
}
|
|
});
|
|
});
|
|
$('.example-p-5').on('click', function () {
|
|
$.confirm({
|
|
title: '成功',
|
|
content: '难消受灯昏罗帐，怅昙花一现恨难休！飘零惯，金戈铁马，拼葬荒丘！',
|
|
type: 'green',
|
|
buttons: {
|
|
omg: {
|
|
text: '谢谢',
|
|
btnClass: 'btn-green',
|
|
},
|
|
close: {
|
|
text: '关闭',
|
|
}
|
|
}
|
|
});
|
|
});
|
|
$('.example-p-6').on('click', function () {
|
|
$.confirm({
|
|
title: '警告',
|
|
content: '把剑凄然望，无处招归舟。明日天涯路远，问谁留楚佩，弄影中洲？数英雄儿女，俯仰古今愁。',
|
|
type: 'orange',
|
|
typeAnimated: false,
|
|
buttons: {
|
|
omg: {
|
|
text: '重试',
|
|
btnClass: 'btn-orange',
|
|
},
|
|
close: {
|
|
text: '关闭',
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |