master

分支 (1)

管理

管理

master

Light-Year-Admin-Using-Iframe
/
lyear_js_jconfirm.html

<!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)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于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>