代码拉取完成，页面将自动刷新
Fork 仓库
加载中
确定同步？
同步操作将从 笔下光年/Light Year Admin Using Iframe v5 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。">
<title>对话框 - 光年(Light Year Admin V5)后台管理系统模板</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!--对话框插件css-->
<link rel="stylesheet" type="text/css" href="js/jquery-confirm/jquery-confirm.min.css">
<link rel="stylesheet" type="text/css" href="css/style.min.css">
</head>
<body>
<div class="container-fluid">
<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>
<!--对话框插件js-->
<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/logo-sidebar.png">',
animation: 'scale',
animationClose: 'top',
buttons: {
confirm: {
text: '添加更多',
btnClass: 'btn-blue',
action: function() {
this.$content.append('<img src="images/loading-logo.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>
举报
请认真填写举报原因，尽可能描述详细。
请选择举报类型
误判申诉
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化