1 Star 0 Fork 129

Pete_Jones / Light Year Admin Using Iframe v4

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
lyear_js_jconfirm.html 13.83 KB
一键复制 编辑 Web IDE 原始数据 按行查看 历史
笔下光年 提交于 2020-05-17 18:38 . 增加对话框和标签页面
<!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>对话框 - 光年(Light Year Admin V4)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V4是一个后台管理系统的HTML模板,基于Bootstrap v4.4.1。">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="js/jquery-confirm/jquery-confirm.min.css" rel="stylesheet">
<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">
<header class="card-header"><div class="card-title">对话框</div></header>
<div class="card-body">
<p>插件使用用jquery-confirm v3.3.4,文档地址:<a href="https://www.jquery-confirm.cn/" target="_blank">https://www.jquery-confirm.cn/</a></p>
<div class="row">
<div class="col-md-3">
<p>优雅的警报。</p>
<button class="btn btn-primary btn-block example-p-1">提示</button>
</div>
<div class="col-md-3">
<p>堆叠确认</p>
<button class="btn btn-primary btn-block example-p-2">确认</button>
</div>
<div class="col-md-3">
<p>成功,错误,警告</p>
<button class="btn btn-primary btn-block example-p-70-type">Alert 类型</button>
</div>
<div class="col-md-3">
<p>需要输入吗?</p>
<button class="btn btn-primary btn-block example-p-7-1">提示</button>
</div>
</div>
<div class="row mt-3">
<div class="col-md-3">
<p>它也是一个对话框。</p>
<button class="btn btn-primary btn-block example-p-4">对话框</button>
</div>
<div class="col-md-3">
<p>不太重要的model</p>
<button class="btn btn-primary btn-block example-p-3">背景消除</button>
</div>
<div class="col-md-3">
<p>异部加载</p>
<button class="btn btn-primary btn-block example-p-5">异部加载</button>
</div>
<div class="col-md-3">
<p>一些动作可能很关键</p>
<button class="btn btn-primary btn-block example-p-6">自动关闭</button>
</div>
</div>
<div class="row mt-3">
<div class="col-md-3">
<p>响应按键</p>
<button class="btn btn-primary btn-block example-p-7">Keystrokes</button>
</div>
<div class="col-md-3">
<p>自动居中</p>
<button class="btn btn-primary btn-block example-pc-1">Alignment</button>
</div>
<div class="col-md-3">
<p>正在载入图片</p>
<button class="btn btn-primary btn-block example-pc-2">Images</button>
</div>
<div class="col-md-3">
<p>干净的动画</p>
<button class="btn btn-primary btn-block example-pc-3">Animations</button>
</div>
</div>
<div class="row mt-3">
<div class="col-md-3">
<p>可拖动的</p>
<button class="btn btn-primary btn-block example-p-7-2">Draggable</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery-confirm/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>单击“确认”或“取消”以获取另一个模式',
icon: 'mdi mdi-rocket',
animation: 'scale',
closeAnimation: 'scale',
buttons: {
okay: {
text: '确认',
btnClass: 'btn-blue'
}
}
});
});
$('.example-p-2').on('click', function() {
$.confirm({
title: '安全的行动',
content: '笑江湖浪迹十年游,空负少年头。对铜驼巷陌,吟情渺渺,心事悠悠!酒冷诗残梦断,南国正清秋。',
icon: 'mdi mdi-comment-question',
animation: 'scale',
closeAnimation: 'scale',
opacity: 0.5,
buttons: {
'confirm': {
text: '继续',
btnClass: 'btn-blue',
action: function() {
$.confirm({
title: '这也许很关键',
content: '关键行动可以有多个这样的确认。',
icon: 'mdi mdi-alert',
animation: 'scale',
closeAnimation: 'zoom',
buttons: {
confirm: {
text: '是的,当然!',
btnClass: 'btn-orange',
action: function() {
$.alert('一个非常关键的动作被 <strong>触发了!</strong>');
}
},
'取消': function() {
$.alert('您点击了 <strong>取消</strong>');
}
}
});
}
},
'取消': function() {
$.alert('您点击了 <strong>取消</strong>');
},
moreButtons: {
text: '其他',
action: function() {
$.alert('您点击了 <strong>其他</strong>');
}
},
}
});
});
// 该效果因为div元素有overflow-x:hidden,输入框获取焦点后阴影效果不好看,所以在form-group上增加p-1
$('.example-p-7-1').on('click', function() {
$.confirm({
title: '简单的形式',
//content: 'url:form.html', // 也可以采用url形式
content: '<div class="form-group p-1 mb-0">' +
' <label class="control-label">您的名字</label>' +
' <input autofocus="" type="text" id="input-name" placeholder="请输入您的名字" class="form-control">' +
'</div>',
buttons: {
sayMyName: {
text: '我的名字',
btnClass: 'btn-orange',
action: function() {
var input = this.$content.find('input#input-name');
var errorText = this.$content.find('.text-danger');
if (!$.trim(input.val())) {
$.alert({
content: "name 字段不能为空为空。",
type: 'red'
});
return false;
} else {
$.alert('您好! ' + input.val() + ', 希望你今天过得愉快!');
}
}
},
'稍等': function() {}
}
});
});
$('.example-p-70-type').on('click', function() {
$.alert({
title: '错误提示',
icon: 'mdi mdi-alert',
type: 'orange',
content: '有问题,请稍后再试。' + '<hr>' + '更多类型:red、green、orange、blue、purple、dark',
});
});
$('.example-p-3').on('click', function() {
$.alert({
title: '背景消除',
content: '单击模态框外部以将其关闭。',
animation: 'scale',
closeAnimation: 'bottom',
backgroundDismiss: true,
buttons: {
okay: {
text: '确认',
btnClass: 'btn-blue',
action: function() {}
}
}
});
});
$('.example-p-4').on('click', function() {
$.dialog({
title: '冰魄寒光剑',
content: '如果只需要一个没有按钮的弹出窗口, <strong>没问题!</strong><br>' + '<h4>禁用所有按钮</h4>' + '<h5>然后你得到一个对话模态框</h5>' + '<h6>如果这里没有按钮,关闭图标就会显示出来 (你需要一些东西来关闭模态框。)</h6>' + '<button type="button" class="btn btn-success">单击我更改内容</button>',
animation: 'scale',
onOpen: function() {
var that = this;
this.$content.find('button').click(function() {
that.setContent('就这么简单!');
})
}
});
});
$('.example-p-5').on('click', function() {
$.dialog({
title: '异步内容',
content: 'url:README.md',
animation: 'scale',
columnClass: 'large',
closeAnimation: 'scale',
backgroundDismiss: true,
});
});
$('.example-p-6').on('click', function() {
$.confirm({
title: '自动关闭',
content: '有些动作可能很关键,用自动关闭来防止。计时器用完后,此对话框将自动触发取消。',
autoClose: 'cancelAction|10000',
escapeKey: 'cancelAction',
buttons: {
confirm: {
btnClass: 'btn-red',
text: '删除 Ben 的帐户',
action: function() {
$.alert('你删除了 Ben 的帐户!');
}
},
cancelAction: {
text: '取消',
action: function() {
$.alert('Ben 刚刚得救了!');
}
}
}
});
});
$('.example-p-7').on('click', function() {
$.confirm({
title: '按键',
escapeKey: true,
content: '按 退出键 关闭模态框。按 回车键 触发正常。按 shift或ctrl键 触发取消。',
backgroundDismiss: true,
buttons: {
okay: {
text: '确认',
keys: ['enter'],
action: function() {
$.alert('<strong>确认按钮</strong> 被触发。');
}
},
cancel: {
text: '取消',
keys: ['ctrl', 'shift'],
action: function() {
$.alert('<strong>取消按钮</strong> 被触发。');
}
}
},
});
});
$('.example-pc-1').on('click', function() {
$.confirm({
title: '优雅地居中对齐',
content: '<p>您可以添加内容,而不必担心对齐问题。我们的目标是制作一个交互式对话。</p>' + '<button type="button" class="btn btn-success">点击我增加更多内容</button><div id="contentArea"></div> ',
buttons: {
someButton: {
text: '增加内容',
btnClass: 'btn-green',
action: function() {
this.$content.find('#contentArea').append('<br>难消受灯昏罗帐,怅昙花一现恨难休!飘零惯,金戈铁马,拼葬荒丘!');
return false;
}
},
someOtherButton: {
text: '清除内容',
btnClass: 'btn-orange',
action: function() {
this.$content.find('#contentArea').html('');
return false;
}
},
'关闭': function() {}
},
onOpen: function() {
var that = this;
this.$content.find('button').click(function() {
that.$content.find('#contentArea').append('<br>这太棒了!!!!');
});
},
});
});
$('.example-pc-2').on('click', function() {
$.confirm({
title: '添加图片',
content: '<p>葫芦娃</p>' + '<img src="images/users/avatar-1.png">',
animation: 'scale',
animationClose: 'top',
buttons: {
confirm: {
text: '添加更多',
btnClass: 'btn-blue',
action: function() {
this.$content.append('<img src="images/users/avatar-2.png">');
return false;
}
},
'取消': function() {}
},
});
});
$(' .example-pc-3').on('click', function() {
$.alert({
title: '动画',
content: 'jquery confirm提供了许多开箱即用的打开和关闭动画。<br>最棒的是,你也可以添加自定义的。',
animation: 'scale',
closeAnimation: 'right',
buttons: {
'放大': function() {
this.setCloseAnimation('zoom');
},
'旋转': function() {
this.setCloseAnimation('rotate');
},
'缩小': function() {
this.setCloseAnimation('scale');
},
'向上': function() {
this.setCloseAnimation('top');
}
},
backgroundDismiss: function() {
return false;
},
});
});
$('.example-p-7-2').on('click', function() {
$.alert({
title: '可拖动的对话',
content: '此对话框是可拖动的,请使用标题将其拖动。它不会触碰屏幕边框。',
type: 'blue',
animation: 'scale',
draggable: true,
});
})
</script>
</body>
</html>
HTML
1
https://gitee.com/pete_jones/Light-Year-Admin-Using-Iframe-v4.git
git@gitee.com:pete_jones/Light-Year-Admin-Using-Iframe-v4.git
pete_jones
Light-Year-Admin-Using-Iframe-v4
Light Year Admin Using Iframe v4
master

搜索帮助

14c37bed 8189591 565d56ea 8189591