Dialog 对话框
纯html+css弹窗 JS
本框架撰写一套完整的自适应弹窗，可简单配合js或jq使用，也可以封装为插件使用。窗口中的ax-window-title，ax-window-close等元素可根据自己需要自由删除。另外可通过对ax-window组合使用样式实现不同效果。
data-mask="true"表示使用遮罩data-drag="true"表示窗口可拖拽data-in="fadeIn"表示窗口渐显data-in="fadeInUp"表示窗口向上渐显data-in="fadeInDown"表示窗口向下渐显
-
<link href="https://src.axui.cn/v1.0/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" > <script src="https://src.axui.cn/v1.0/src/plugins/sweetalert2/js/sweetalert2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#open-win01").click(function () { $("#win01").addClass("ax-window-show"); }); $("#open-win02").click(function () { $("#win02").addClass("ax-window-show"); }); $("#open-win03").click(function () { $("#win03").addClass("ax-window-show"); }); $("#open-win04").click(function () { $("#win04").addClass("ax-window-show"); }); $("#open-win05").click(function () { $("#win05").addClass("ax-window-show"); }); </script> -
<a href="###" class="ax-btn ax-primary" id="open-win01">普通弹窗</a> <a href="###" class="ax-btn ax-primary" id="open-win02">加分割线</a> <a href="###" class="ax-btn ax-primary" id="open-win03">不要标题</a> <a href="###" class="ax-btn ax-primary" id="open-win04">不要遮罩</a> <a href="###" class="ax-btn ax-primary" id="open-win05">拖拽窗口</a> <!--常规窗口--> <div class="ax-window" data-mask="true" id="win01"> <div class="ax-window-overlay"></div> <div class="ax-window-contain"> <a href="###" class="ax-window-close"><i class="ax-iconfont ax-icon-close"></i></a> <div class="ax-window-title">关于中国</div> <div class="ax-window-content"> <div class="ax-padding"> <p> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p> </div> </div> <div class="ax-padding ax-window-operate"> <div class="ax-row"> <div class="ax-col"> <div class="ax-explain">您还要看更多么？</div> </div> <div class="ax-btns"> <a href="###" class="ax-btn ax-text ax-ignore ax-window-close">取消</a> <a href="###" class="ax-btn ax-primary">确定</a> </div> </div> </div> </div> </div> <!--窗口-分割线--> <div class="ax-window" data-mask="true" id="win02"> <div class="ax-window-overlay"></div> <div class="ax-window-contain"> <a href="###" class="ax-window-close"><i class="ax-iconfont ax-icon-close"></i></a> <div class="ax-window-title">关于中国</div> <div class="ax-break-line"></div> <div class="ax-window-content"> <div class="ax-padding"> <p> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p> </div> </div> <div class="ax-break-line"></div> <div class="ax-padding ax-window-operate"> <div class="ax-row"> <div class="ax-col"> <div class="ax-explain">您还要看更多么？</div> </div> <div class="ax-btns"> <a href="###" class="ax-btn ax-ignore ax-window-close">取消</a> <a href="###" class="ax-btn ax-primary">确定</a> </div> </div> </div> </div> </div> <!--窗口-去标题--> <div class="ax-window" data-mask="true" id="win03"> <div class="ax-window-overlay"></div> <div class="ax-window-contain"> <a href="###" class="ax-window-close"><i class="ax-iconfont ax-icon-close"></i></a> <div class="ax-window-content"> <div class="ax-break-xl"></div> <div class="ax-padding"> <p> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p> </div> </div> <div class="ax-padding ax-window-operate"> <div class="ax-row"> <div class="ax-col"> <div class="ax-explain ax-color-ad">您还要看更多么？</div> </div> <div class="ax-btns"> <a href="###" class="ax-btn ax-ignore ax-window-close">取消</a> <a href="###" class="ax-btn ax-primary">确定</a> </div> </div> </div> </div> </div> <!--窗口-去遮罩--> <div class="ax-window" id="win04"> <div class="ax-window-overlay"></div> <div class="ax-window-contain"> <a href="###" class="ax-window-close"><i class="ax-iconfont ax-icon-close"></i></a> <div class="ax-window-content"> <div class="ax-break-xl"></div> <div class="ax-padding"> <p> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p> </div> </div> <div class="ax-padding ax-window-operate"> <div class="ax-row"> <div class="ax-col"> <div class="ax-explain ax-color-ad">您还要看更多么？</div> </div> <div class="ax-btns"> <a href="###" class="ax-btn ax-ignore ax-window-close">取消</a> <a href="###" class="ax-btn ax-primary">确定</a> </div> </div> </div> </div> </div> <!--拖拽窗口--> <div class="ax-window" data-mask="true" data-drag="true" id="win05"> <div class="ax-window-overlay"></div> <div class="ax-window-contain"> <a href="###" class="ax-window-close"><i class="ax-iconfont ax-icon-close"></i></a> <div class="ax-window-title">关于中国</div> <div class="ax-window-content"> <div class="ax-padding"> <p> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p> </div> </div> <div class="ax-padding ax-window-operate"> <div class="ax-row"> <div class="ax-col"> <div class="ax-explain">您还要看更多么？</div> </div> <div class="ax-btns"> <a href="###" class="ax-btn ax-text ax-ignore ax-window-close">取消</a> <a href="###" class="ax-btn ax-primary">确定</a> </div> </div> </div> </div> </div>
弹窗弹出动画 JS
弹窗默认是弹簧弹窗，用户根据需要使用data-in="fadeIn"，data-in="fadeInUp"，data-in="fadeInDown"动画样式
-
<link href="https://src.axui.cn/v1.0/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" > <script src="https://src.axui.cn/v1.0/src/plugins/sweetalert2/js/sweetalert2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#open-ani01").click(function () { $("#ani01").addClass("ax-window-show"); }); $("#open-ani02").click(function () { $("#ani02").addClass("ax-window-show"); }); $("#open-ani03").click(function () { $("#ani03").addClass("ax-window-show"); }); $("#open-ani04").click(function () { $("#ani04").addClass("ax-window-show"); }); </script> -
<a href="###" class="ax-btn ax-primary" id="open-ani01">弹簧（默认）</a> <a href="###" class="ax-btn ax-primary" id="open-ani02">渐显</a> <a href="###" class="ax-btn ax-primary" id="open-ani03">向上渐显</a> <a href="###" class="ax-btn ax-primary" id="open-ani04">向下渐显</a> <!--弹簧窗口默认--> <div class="ax-window" data-mask="true" id="ani01"> <div class="ax-window-overlay"></div> <div class="ax-window-contain"> <a href="###" class="ax-window-close"><i class="ax-iconfont ax-icon-close"></i></a> <div class="ax-window-title">关于中国</div> <div class="ax-window-content"> <div class="ax-padding"> <p> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p> </div> </div> <div class="ax-padding ax-window-operate"> <div class="ax-row"> <div class="ax-col"> <div class="ax-explain">您还要看更多么？</div> </div> <div class="ax-btns"> <a href="###" class="ax-btn ax-text ax-ignore ax-window-close">取消</a> <a href="###" class="ax-btn ax-primary">确定</a> </div> </div> </div> </div> </div> <!--渐显窗口--> <div class="ax-window" data-mask="true" data-in="fadeIn" id="ani02"> <div class="ax-window-overlay"></div> <div class="ax-window-contain"> <a href="###" class="ax-window-close"><i class="ax-iconfont ax-icon-close"></i></a> <div class="ax-window-title">关于中国</div> <div class="ax-window-content"> <div class="ax-padding"> <p> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p> </div> </div> <div class="ax-padding ax-window-operate"> <div class="ax-row"> <div class="ax-col"> <div class="ax-explain">您还要看更多么？</div> </div> <div class="ax-btns"> <a href="###" class="ax-btn ax-text ax-ignore ax-window-close">取消</a> <a href="###" class="ax-btn ax-primary">确定</a> </div> </div> </div> </div> </div> <!--向上渐显窗口--> <div class="ax-window" data-mask="true" data-in="fadeInUp" id="ani03"> <div class="ax-window-overlay"></div> <div class="ax-window-contain"> <a href="###" class="ax-window-close"><i class="ax-iconfont ax-icon-close"></i></a> <div class="ax-window-title">关于中国</div> <div class="ax-window-content"> <div class="ax-padding"> <p> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p> </div> </div> <div class="ax-padding ax-window-operate"> <div class="ax-row"> <div class="ax-col"> <div class="ax-explain">您还要看更多么？</div> </div> <div class="ax-btns"> <a href="###" class="ax-btn ax-text ax-ignore ax-window-close">取消</a> <a href="###" class="ax-btn ax-primary">确定</a> </div> </div> </div> </div> </div> <!--向下渐显窗口--> <div class="ax-window" data-mask="true" data-in="fadeInDown" id="ani04"> <div class="ax-window-overlay"></div> <div class="ax-window-contain"> <a href="###" class="ax-window-close"><i class="ax-iconfont ax-icon-close"></i></a> <div class="ax-window-title">关于中国</div> <div class="ax-window-content"> <div class="ax-padding"> <p> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p> </div> </div> <div class="ax-padding ax-window-operate"> <div class="ax-row"> <div class="ax-col"> <div class="ax-explain">您还要看更多么？</div> </div> <div class="ax-btns"> <a href="###" class="ax-btn ax-text ax-ignore ax-window-close">取消</a> <a href="###" class="ax-btn ax-primary">确定</a> </div> </div> </div> </div> </div>
弹窗表单 JS
弹窗可装入form表单元素，可适用所有风格的表单元素，并自适应手机。
-
<link href="https://src.axui.cn/v1.0/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" > <script src="https://src.axui.cn/v1.0/src/plugins/sweetalert2/js/sweetalert2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#open-form01").click(function () { $("#form01").addClass("ax-window-show"); }); $("#open-form02").click(function () { $("#form02").addClass("ax-window-show"); }); $("#open-form03").click(function () { $("#form03").addClass("ax-window-show"); }); </script> -
<a href="###" class="ax-btn ax-primary" id="open-form01">表单窗口01</a> <a href="###" class="ax-btn ax-primary" id="open-form02">表单窗口02</a> <a href="###" class="ax-btn ax-primary" id="open-form03">表单窗口03</a> <!--窗口-表单1--> <div class="ax-window" data-mask="true" id="form01"> <form> <div class="ax-window-overlay"></div> <div class="ax-window-contain"> <a href="###" class="ax-window-close"><i class="ax-iconfont ax-icon-close"></i></a> <div class="ax-window-title">表单窗口</div> <div class="ax-break-line"></div> <div class="ax-window-content"> <div class="ax-emulate"> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">姓名：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="username" placeholder="输入姓名" type="text"></div> </div> <span class="ax-form-txt ax-color-primary ax-iconfont ax-icon-check-o-fill"></span> </div> </div> <div class="ax-break-line"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">籍贯：</div> <div class="ax-form-con"> <div class="ax-form-input"> <div class="ax-row"> <div class="ax-col ax-col-8"><input name="username" placeholder="填写..." value="" type="text"></div> <span class="ax-bunch-txt">省</span> <div class="ax-col ax-col-8"><input name="username" placeholder="填写..." value="" type="text"></div> <span class="ax-bunch-txt">市</span> <div class="ax-col ax-col-8"><input name="username" placeholder="填写..." value="" type="text"></div> <span class="ax-bunch-txt">区/县</span> </div> </div> </div> </div> </div> <div class="ax-break-line"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">头像：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="username" placeholder="远程地址" value="" type="text"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a><span class="ax-iconfont ax-icon-me"></span></span></div> </div> <a href="###" class="ax-form-head" style="background-image:url(https://src.axui.cn/v1.0/examples/images/head01.jpg),url(../core/images/loading.gif);"></a><span class="ax-form-txt ax-color-des">李创江</span> </div> </div> </div> </div> <div class="ax-break-line"></div> <div class="ax-padding ax-window-operate"> <div class="ax-row"> <div class="ax-col"> <div class="ax-explain">您还要填写更多么？</div> </div> <div class="ax-btns"> <a href="###" class="ax-btn ax-text ax-ignore ax-window-close">取消</a> <a href="###" class="ax-btn ax-primary">确定</a> </div> </div> </div> </div> </form> </div> <!--窗口-表单2--> <div class="ax-window" data-mask="true" id="form02"> <form> <div class="ax-window-overlay"></div> <div class="ax-window-contain"> <a href="###" class="ax-window-close"><i class="ax-iconfont ax-icon-close"></i></a> <div class="ax-window-title">表单窗口</div> <div class="ax-break-line"></div> <div class="ax-window-content"> <div class="ax-border-tel ax-radius-tel ax-margin ax-response-tel "> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-con"> <div class="ax-form-input"><span class="ax-pos-left" style="width:28px;"><svg class="ax-svg"><use xlink:href="#ax-icon-me-fill"></use></svg></span><input name="username" placeholder="输入登录名称" type="text"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a></span></div> </div> </div> </div> <div class="ax-break-md ax-hide-tel"></div> <div class="ax-break-line ax-hide-pad ax-hide-pc"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-con"> <div class="ax-form-input"><span class="ax-pos-left" style="width:28px;"><svg class="ax-svg"><use xlink:href="#ax-icon-lock-fill"></use></svg></span><input name="password" placeholder="输入密码" type="password"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a></span></div> </div> </div> </div> <div class="ax-break-md ax-hide-tel"></div> <div class="ax-break-line ax-hide-pad ax-hide-pc"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-con"> <div class="ax-form-input"> <div class="ax-row"> <div class="ax-flex-block"><span class="ax-pos-left" style="width:28px;"><svg class="ax-svg"><use xlink:href="#ax-icon-shield-fill"></use></svg></span><input name="username" placeholder="输入验证码..." value="" type="text"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a></span> </div> <a href="###" class="ax-form-img"><img src="https://src.axui.cn/v1.0/examples/images/yanzhengma.jpg"></a> </div> </div> </div> </div> </div> </div> </div> <div class="ax-break-line"></div> <div class="ax-padding ax-window-operate"> <div class="ax-row"> <div class="ax-col"> <div class="ax-explain">您还要填写更多么？</div> </div> <div class="ax-btns"> <a href="###" class="ax-btn ax-text ax-ignore ax-window-close">取消</a> <a href="###" class="ax-btn ax-primary">确定</a> </div> </div> </div> </div> </form> </div> <!--窗口-表单3--> <div class="ax-window" data-mask="true" id="form03"> <form> <div class="ax-window-overlay"></div> <div class="ax-window-contain"> <a href="###" class="ax-window-close"><i class="ax-iconfont ax-icon-close"></i></a> <div class="ax-window-title">表单窗口</div> <div class="ax-break-line"></div> <div class="ax-window-content"> <div class="ax-padding ax-outer-tel"> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-con"> <div class="ax-form-input"> <div class="ax-flex-row ax-form-origin"><div class="ax-flex-block ax-title">账号</div><span class="ax-color-ignore">还可以输入<i class="ax-color-warning">8</i>个文字</span></div> </div> </div> </div> <div class="ax-flex-row"> <div class="ax-form-con"> <div class="ax-form-input"><input name="username" placeholder="输入账号" type="text"></div> </div> </div> </div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-con"> <div class="ax-form-input"> <div class="ax-flex-row ax-form-origin"><div class="ax-flex-block ax-title">密码</div><span class="ax-color-ignore">忘记了密码？</span></div> </div> </div> </div> <div class="ax-flex-row"> <div class="ax-form-con"> <div class="ax-form-input"><input name="username" placeholder="输入账号" type="password"></div> <div class="ax-valid ax-color-danger"><span class="ax-iconfont ax-icon-close-o-fill"></span>填写错误！</div> </div> </div> </div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-con"> <div class="ax-form-input"> <div class="ax-flex-row ax-form-origin"><div class="ax-flex-block ax-title">验证码</div></div> </div> </div> </div> <div class="ax-flex-row"> <div class="ax-form-con"> <div class="ax-form-input"> <div class="ax-row"> <div class="ax-flex-block"> <input name="username" placeholder="输入验证码..." value="" type="text"> </div> <span class="ax-form-img"><a href="###">显示验证码</a></span> </div> </div> </div> </div> </div> </div> </div> <div class="ax-break-line"></div> <div class="ax-padding ax-window-operate"> <div class="ax-row"> <div class="ax-col"> <div class="ax-explain">您还要填写更多么？</div> </div> <div class="ax-btns"> <a href="###" class="ax-btn ax-text ax-ignore ax-window-close">取消</a> <a href="###" class="ax-btn ax-primary">确定</a> </div> </div> </div> </div> </form> </div>
弹窗提示 JS
本框架根据弹窗预置了三种提示，格式可自由定制。
-
<link href="https://src.axui.cn/v1.0/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" > <script src="https://src.axui.cn/v1.0/src/plugins/sweetalert2/js/sweetalert2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#open-tip01").click(function () { $("#tip01").addClass("ax-window-show"); }); $("#open-tip02").click(function () { $("#tip02").addClass("ax-window-show"); }); $("#open-tip03").click(function () { $("#tip03").addClass("ax-window-show"); }); $("#open-tip04").click(function () { $("#tip04").addClass("ax-window-show"); }); $("#open-tip05").click(function () { $("#tip05").addClass("ax-window-show"); }); </script> -
<a href="###" class="ax-btn ax-primary" id="open-tip01">成功提示</a> <a href="###" class="ax-btn ax-primary" id="open-tip02">失败提示</a> <a href="###" class="ax-btn ax-primary" id="open-tip03">信息提示</a> <a href="###" class="ax-btn ax-primary" id="open-tip04">警告提示</a> <a href="###" class="ax-btn ax-primary" id="open-tip05">疑问提示</a> <!--成功提示--> <div class="ax-window" data-mask="true" id="tip01"> <div class="ax-window-overlay"></div> <div class="ax-window-contain"> <a href="###" class="ax-window-close"><i class="ax-iconfont ax-icon-close"></i></a> <div class="ax-window-content"> <div class="ax-window-tips"> <div class="ax-tips-icon ax-result ax-success"><i class="ax-iconfont ax-icon-check-o"></i></div> <div class="ax-tips-title">操作成功!</div> <div class="ax-tips-des">支付信息将通过短信发送给您，注意查收！</div> <div class="ax-tips-btn"> <a href="###" class="ax-btn ax-longer ax-primary ax-window-close">我知道了</a> </div> </div> </div> </div> </div> <!--失败提示--> <div class="ax-window" data-mask="true" id="tip02"> <div class="ax-window-overlay"></div> <div class="ax-window-contain"> <a href="###" class="ax-window-close"><i class="ax-iconfont ax-icon-close"></i></a> <div class="ax-window-content"> <div class="ax-window-tips"> <div class="ax-tips-icon ax-result ax-error"><i class="ax-iconfont ax-icon-close-o"></i></div> <div class="ax-tips-title">操作失败!</div> <div class="ax-tips-des">请重打开页面输入正确金额！</div> <div class="ax-tips-btn"> <a href="###" class="ax-btn ax-longer ax-primary ax-window-close">我知道了</a> </div> </div> </div> </div> </div> <!--信息提示--> <div class="ax-window" data-mask="true" id="tip03"> <div class="ax-window-overlay"></div> <div class="ax-window-contain"> <a href="###" class="ax-window-close"><i class="ax-iconfont ax-icon-close"></i></a> <div class="ax-window-content"> <div class="ax-window-tips"> <div class="ax-tips-icon ax-result ax-info"><i class="ax-iconfont ax-icon-info-o"></i></div> <div class="ax-tips-title">已经提交!</div> <div class="ax-tips-des">请等待管理员审核，详情进入个人中心-我的提交</div> <div class="ax-tips-btn"> <a href="###" class="ax-btn ax-longer ax-primary ax-window-close">我知道了</a> </div> </div> </div> </div> </div> <!--警告提示--> <div class="ax-window" data-mask="true" id="tip04"> <div class="ax-window-overlay"></div> <div class="ax-window-contain"> <a href="###" class="ax-window-close"><i class="ax-iconfont ax-icon-close"></i></a> <div class="ax-window-content"> <div class="ax-window-tips"> <div class="ax-tips-icon ax-result ax-warning"><i class="ax-iconfont ax-icon-warning-o"></i></div> <div class="ax-tips-title">注意事项!</div> <div class="ax-tips-des">必须在两日内完成资料上传！</div> <div class="ax-tips-btn"> <a href="###" class="ax-btn ax-longer ax-primary ax-window-close">我知道了</a> </div> </div> </div> </div> </div> <!--问题提示--> <div class="ax-window" data-mask="true" id="tip05"> <div class="ax-window-overlay"></div> <div class="ax-window-contain"> <a href="###" class="ax-window-close"><i class="ax-iconfont ax-icon-close"></i></a> <div class="ax-window-content"> <div class="ax-window-tips"> <div class="ax-tips-icon ax-result ax-question"><i class="ax-iconfont ax-icon-question-o"></i></div> <div class="ax-tips-title">我有疑问</div> <div class="ax-tips-des">请详细描述您的问题，提交给我们，谢谢您！</div> <div class="ax-tips-btn"> <a href="###" class="ax-btn ax-longer ax-primary ax-window-close">我知道了</a> </div> </div> </div> </div> </div>
弹窗关闭 JS
本框架弹窗的关闭方式有三种：一是点击右上角的关闭按钮；二是点击遮罩；三是自定义关闭按钮，在ax-window中添加ax-window-close元素即可。
-
<link href="https://src.axui.cn/v1.0/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" > <script src="https://src.axui.cn/v1.0/src/plugins/sweetalert2/js/sweetalert2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#open-close01").click(function () { $("#close01").addClass("ax-window-show"); }); $("#open-close02").click(function () { $("#close02").addClass("ax-window-show"); }); $("#open-close03").click(function () { $("#close03").addClass("ax-window-show"); }); </script> -
<a href="###" class="ax-btn ax-primary" id="open-close01">右上角关闭按钮</a> <a href="###" class="ax-btn ax-primary" id="open-close02">点击遮罩关闭</a> <a href="###" class="ax-btn ax-primary" id="open-close03">自定义关闭按钮</a> <!--右上角关闭--> <div class="ax-window" id="close01"> <div class="ax-window-overlay"></div> <div class="ax-window-contain"> <a href="###" class="ax-window-close"><i class="ax-iconfont ax-icon-close"></i></a> <div class="ax-window-title">关于中国</div> <div class="ax-window-content"> <div class="ax-padding"> <p> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p> </div> </div> <div class="ax-padding ax-window-operate"> <div class="ax-row"> <div class="ax-col"> <div class="ax-explain">您还要看更多么？</div> </div> <div class="ax-btns"> <a href="###" class="ax-btn ax-primary">确定</a> </div> </div> </div> </div> </div> <!--遮罩关闭--> <div class="ax-window" data-mask="true" id="close02"> <div class="ax-window-overlay"></div> <div class="ax-window-contain"> <div class="ax-window-title">关于中国</div> <div class="ax-window-content"> <div class="ax-padding"> <p> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p> </div> </div> <div class="ax-padding ax-window-operate"> <div class="ax-row"> <div class="ax-col"> <div class="ax-explain">您还要看更多么？</div> </div> <div class="ax-btns"> <a href="###" class="ax-btn ax-primary">确定</a> </div> </div> </div> </div> </div> <!--自定义关闭--> <div class="ax-window" id="close03"> <div class="ax-window-overlay"></div> <div class="ax-window-contain"> <div class="ax-window-title">关于中国</div> <div class="ax-window-content"> <div class="ax-padding"> <p> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p> </div> </div> <div class="ax-padding ax-window-operate"> <div class="ax-row"> <div class="ax-col"> <div class="ax-explain">您还要看更多么？</div> </div> <div class="ax-btns"> <a href="###" class="ax-btn ax-primary ax-window-close">确定并关闭</a> </div> </div> </div> </div> </div>
弹窗按钮 JS
本框架的弹窗按钮有三种：一是左右结构，左侧文字，右侧按钮；二是居中结构，按钮都安排在中间排列；三是底部线条按钮，简约风格。
-
<link href="https://src.axui.cn/v1.0/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" > <script src="https://src.axui.cn/v1.0/src/plugins/sweetalert2/js/sweetalert2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#open-btn01").click(function () { $("#btn01").addClass("ax-window-show"); }); $("#open-btn02").click(function () { $("#btn02").addClass("ax-window-show"); }); $("#open-btn03").click(function () { $("#btn03").addClass("ax-window-show"); }); $("#open-btn04").click(function () { $("#btn04").addClass("ax-window-show"); }); </script> -
<a href="###" class="ax-btn ax-primary" id="open-btn01">左右结构</a> <a href="###" class="ax-btn ax-primary" id="open-btn02">居中结构</a> <a href="###" class="ax-btn ax-primary" id="open-btn03">线条按钮</a> <a href="###" class="ax-btn ax-primary" id="open-btn04">图标按钮</a> <!--左右结构--> <div class="ax-window" data-mask="true" id="btn01"> <div class="ax-window-overlay"></div> <div class="ax-window-contain"> <a href="###" class="ax-window-close"><i class="ax-iconfont ax-icon-close"></i></a> <div class="ax-window-title">关于中国</div> <div class="ax-window-content"> <div class="ax-padding"> <p> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p> </div> </div> <div class="ax-padding ax-window-operate"> <div class="ax-row"> <div class="ax-col"> <div class="ax-explain">您还要看更多么？</div> </div> <div class="ax-btns"> <a href="###" class="ax-btn ax-text ax-ignore ax-window-close">取消</a> <a href="###" class="ax-btn ax-primary">确定</a> </div> </div> </div> </div> </div> <!--居中结构--> <div class="ax-window" data-mask="true" id="btn02"> <div class="ax-window-overlay"></div> <div class="ax-window-contain"> <a href="###" class="ax-window-close"><i class="ax-iconfont ax-icon-close"></i></a> <div class="ax-window-title">关于中国</div> <div class="ax-window-content"> <div class="ax-padding"> <p> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p> </div> </div> <div class="ax-padding ax-window-operate ax-align-center"> <a href="###" class="ax-btn ax-ignore ax-window-close">取消</a> <a href="###" class="ax-btn ax-primary">确定</a> </div> <div class="ax-break"></div> </div> </div> <!--线条按钮--> <div class="ax-window" data-mask="true" id="btn03"> <div class="ax-window-overlay"></div> <div class="ax-window-contain"> <a href="###" class="ax-window-close"><i class="ax-iconfont ax-icon-close"></i></a> <div class="ax-window-title">关于中国</div> <div class="ax-window-content"> <div class="ax-padding"> <p> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p> </div> </div> <div class="ax-break-line"></div> <div class="ax-row ax-window-operate"> <a href="###" class="ax-col ax-col-12 ax-color-ignore">取消</a> <span class="ax-gutter-line"></span> <a href="###" class="ax-col ax-col-12">确定</a> <span class="ax-gutter-line"></span> <a href="###" class="ax-col ax-col-12">分享</a> </div> </div> </div> <!--图标按钮--> <div class="ax-window" data-mask="true" id="btn04"> <div class="ax-window-overlay"></div> <div class="ax-window-contain"> <a href="###" class="ax-window-close"><i class="ax-iconfont ax-icon-close"></i></a> <div class="ax-window-title">关于中国</div> <div class="ax-window-content"> <div class="ax-padding"> <p> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p> </div> </div> <div class="ax-break-line"></div> <div class="ax-row ax-window-operate"> <a href="###" class="ax-col ax-col-12"><i class="ax-iconfont ax-icon-edit"></i> 编辑</a> <span class="ax-gutter-line"></span> <a href="###" class="ax-col ax-col-12"><i class="ax-iconfont ax-icon-message-s"></i> 评论</a> <span class="ax-gutter-line"></span> <a href="###" class="ax-col ax-col-12"><i class="ax-iconfont ax-icon-link-open"></i></a> </div> </div> </div>
弹窗尺寸 JS
本框架定义了四种尺寸，对data-size属性使用small、middle或large。默认是middle。
small宽300pxmiddle默认宽500pxlarge全宽full满屏
关于中国
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。
中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。
中国文化渊远流长、博大精深、绚烂多彩，是东亚文化圈的文化宗主国，在世界文化体系内占有重要地位，由于各地的地理位置、自然条件的差异，人文、经济方面也各有特点。传统文化艺术形式有诗词、戏曲、书法、国画等，而春节、元宵、清明、端午、中秋、重阳等则是中国重要的传统节日。
中国一词最早见于西周初年的青铜器“何尊”铭文中的“余其宅兹中国，自之辟民”，同时又以“华夏”、“中华”、“中夏”、“中原”、“诸夏”、“诸华”、“神州”、“九州”、“海内”等的代称出现。
“华夏”一词最早见于周朝《尚书·周书·武成》，“华夏蛮貊，罔不率俾”。 《书经》曰：“冕服采装曰华，大国曰夏”。《尚书正义》注：“冕服华章曰华，大国曰夏”。“华”，是指华丽、兴旺；也有说上古华、夏同音，本一字。《左传》曰：“中国有礼仪之大，故称夏；有服章之美，谓之华。” 华是指汉服，夏指行周礼的大国，故中国有礼仪之邦、衣冠上国之美誉。
-
<link href="https://src.axui.cn/v1.0/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" > <script src="https://src.axui.cn/v1.0/src/plugins/sweetalert2/js/sweetalert2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#open-size01").click(function () { $("#size01").addClass("ax-window-show"); }); $("#open-size02").click(function () { $("#size02").addClass("ax-window-show"); }); $("#open-size03").click(function () { $("#size03").addClass("ax-window-show"); }); $("#open-size04").click(function () { $("#size04").addClass("ax-window-show"); }); </script> -
<a href="###" class="ax-btn ax-primary" id="open-size01">middle默认500px</a> <a href="###" class="ax-btn ax-primary" id="open-size02">small300px</a> <a href="###" class="ax-btn ax-primary" id="open-size03">large全宽</a> <a href="###" class="ax-btn ax-primary" id="open-size04">full满屏</a> <!--middle默认500--> <div class="ax-window" data-mask="true" id="size01"> <div class="ax-window-overlay"></div> <div class="ax-window-contain"> <a href="###" class="ax-window-close"><i class="ax-iconfont ax-icon-close"></i></a> <div class="ax-window-title">关于中国</div> <div class="ax-window-content"> <div class="ax-padding"> <p> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p> </div> </div> <div class="ax-break-line"></div> <div class="ax-row ax-window-operate"> <a href="###" class="ax-col ax-col-12 ax-color-ignore">取消</a> <span class="ax-gutter-line"></span> <a href="###" class="ax-col ax-col-12">确定</a> </div> </div> </div> <!--small300px--> <div class="ax-window" data-size="small" data-mask="true" id="size02"> <div class="ax-window-overlay"></div> <div class="ax-window-contain"> <a href="###" class="ax-window-close"><i class="ax-iconfont ax-icon-close"></i></a> <div class="ax-window-title">关于中国</div> <div class="ax-window-content"> <div class="ax-padding"> <p> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p> </div> </div> <div class="ax-break-line"></div> <div class="ax-row ax-window-operate"> <a href="###" class="ax-col ax-col-12 ax-color-ignore">取消</a> <span class="ax-gutter-line"></span> <a href="###" class="ax-col ax-col-12">确定</a> </div> </div> </div> <!--large全宽--> <div class="ax-window" data-size="large" data-mask="true" id="size03"> <div class="ax-window-overlay"></div> <div class="ax-window-contain"> <a href="###" class="ax-window-close"><i class="ax-iconfont ax-icon-close"></i></a> <div class="ax-window-title">关于中国</div> <div class="ax-window-content"> <div class="ax-padding"> <p> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p> </div> </div> <div class="ax-break-line"></div> <div class="ax-row ax-window-operate"> <a href="###" class="ax-col ax-col-12 ax-color-ignore">取消</a> <span class="ax-gutter-line"></span> <a href="###" class="ax-col ax-col-12">确定</a> </div> </div> </div> <!--full全屏--> <div class="ax-window" data-size="full" data-mask="true" id="size04"> <div class="ax-window-overlay"></div> <div class="ax-window-contain"> <a href="###" class="ax-window-close"><i class="ax-iconfont ax-icon-close"></i></a> <div class="ax-flex-col"> <div class="ax-window-title">关于中国</div> <div class="ax-flex-block"> <div class="ax-window-content"> <div class="ax-padding"> <p> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p> <p> 中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。</p> <p> 中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。</p> <p> 中国文化渊远流长、博大精深、绚烂多彩，是东亚文化圈的文化宗主国，在世界文化体系内占有重要地位，由于各地的地理位置、自然条件的差异，人文、经济方面也各有特点。传统文化艺术形式有诗词、戏曲、书法、国画等，而春节、元宵、清明、端午、中秋、重阳等则是中国重要的传统节日。</p> <p> 中国一词最早见于西周初年的青铜器“何尊”铭文中的“余其宅兹中国，自之辟民”，同时又以“华夏”、“中华”、“中夏”、“中原”、“诸夏”、“诸华”、“神州”、“九州”、“海内”等的代称出现。</p> <p> “华夏”一词最早见于周朝《尚书·周书·武成》，“华夏蛮貊，罔不率俾”。 《书经》曰：“冕服采装曰华，大国曰夏”。《尚书正义》注：“冕服华章曰华，大国曰夏”。“华”，是指华丽、兴旺；也有说上古华、夏同音，本一字。《左传》曰：“中国有礼仪之大，故称夏；有服章之美，谓之华。” 华是指汉服，夏指行周礼的大国，故中国有礼仪之邦、衣冠上国之美誉。</p> </div> </div> </div> <div class="ax-break-line"></div> <div class="ax-row ax-window-operate"> <a href="###" class="ax-col ax-col-12 ax-color-ignore">取消</a> <span class="ax-gutter-line"></span> <a href="###" class="ax-col ax-col-12">确定</a> </div> </div> </div> </div>
多媒体弹窗 JS
本框架的弹窗按钮有三种：一是左右结构，左侧文字，右侧按钮；二是居中结构，按钮都安排在中间排列；三是底部线条按钮，简约风格。
关于中国
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。
中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。
中国文化渊远流长、博大精深、绚烂多彩，是东亚文化圈的文化宗主国，在世界文化体系内占有重要地位，由于各地的地理位置、自然条件的差异，人文、经济方面也各有特点。传统文化艺术形式有诗词、戏曲、书法、国画等，而春节、元宵、清明、端午、中秋、重阳等则是中国重要的传统节日。
中国一词最早见于西周初年的青铜器“何尊”铭文中的“余其宅兹中国，自之辟民”，同时又以“华夏”、“中华”、“中夏”、“中原”、“诸夏”、“诸华”、“神州”、“九州”、“海内”等的代称出现。
“华夏”一词最早见于周朝《尚书·周书·武成》，“华夏蛮貊，罔不率俾”。 《书经》曰：“冕服采装曰华，大国曰夏”。《尚书正义》注：“冕服华章曰华，大国曰夏”。“华”，是指华丽、兴旺；也有说上古华、夏同音，本一字。《左传》曰：“中国有礼仪之大，故称夏；有服章之美，谓之华。” 华是指汉服，夏指行周礼的大国，故中国有礼仪之邦、衣冠上国之美誉。
关于中国
| 情形 | 描述 | 回购和转让安排 | 操作 |
|---|---|---|---|
1、激励对象主动解除劳动关系 |
在劳动合同期内书面辞职 |
按照原始出资价格加每年6%利息回购 |
|
2、激励对象被解除劳动关系 |
因违反法律、法规、甲方规章制度、双方协议等被解除劳动关系的 |
按照原始出资价格回购，如果给公司造成损失，赔偿损失 |
|
3、丧失劳动能力并终止劳动关系 |
激励对象因伤病等非工伤的原因 |
按照原始出资价格加每年10%的利息回购 |
|
4、职务变更（仅限于高管） |
职务调整，按照“股随岗走”原则，依据公司的《岗位与激励股权确定细则》确定乙方的激励股权，相应增加或者减少 |
增加激励股权按照新的激励对象处理；减少激励股权按照应减少的激励股权出资额加10%利率回购 |
|
5、退休 |
88退休且不签署《保密及竞业限制协议》 |
按照原始出资价格加每年12%的利息回购 |
|
6、死亡 |
公司股份不能在公开市场自由转让的 |
继承人与公司股东协商转让，如无人受让，则原始出资价格加每年12%的利息回购 |
-
<link href="https://src.axui.cn/v1.0/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" > <script src="https://src.axui.cn/v1.0/src/plugins/sweetalert2/js/sweetalert2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#open-media01").click(function () { $("#media01").addClass("ax-window-show"); setTimeout(function(){$("#media01").find(".ax-window-content").axScroll();}, 300); }); $("#open-media02").click(function () { $("#media02").addClass("ax-window-show"); }); $("#open-media03").click(function () { $("#media03").addClass("ax-window-show"); setTimeout(function(){$("#media03").find(".ax-window-content").axScroll();}, 300); }); $("#open-media04").click(function () { $("#media04").addClass("ax-window-show"); }); </script> -
<a href="###" class="ax-btn ax-primary" id="open-media01">大段文字</a> <a href="###" class="ax-btn ax-primary" id="open-media02">视频播放</a> <a href="###" class="ax-btn ax-primary" id="open-media03">大型表格</a> <a href="###" class="ax-btn ax-primary" id="open-media04">窗口搜索</a> <!--窗口-大段文字--> <div class="ax-window ax-window-mask" data-mask="true" id="media01"> <div class="ax-window-overlay"></div> <div class="ax-window-contain"> <a href="###" class="ax-window-close"><i class="ax-iconfont ax-icon-close"></i></a> <div class="ax-window-title">关于中国</div> <div class="ax-window-content"> <div class="ax-padding"> <p> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p> <p> 中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。</p> <video controls="controls" > <source src="https://src.axui.cn/v1.0/examples/media/video.mp4" type="video/mp4"> 您的浏览器不支持播放该视频，<a href="###" class="ax-color-primary">点击这里更新浏览器</a> </video> <p> 中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。</p> <audio src="https://src.axui.cn/v1.0/examples/media/audio.mp3" controls="controls"> 您的浏览器不支持播放该音频，<a href="###" class="ax-color-primary">点击这里更新浏览器</a> </audio> <p> 中国文化渊远流长、博大精深、绚烂多彩，是东亚文化圈的文化宗主国，在世界文化体系内占有重要地位，由于各地的地理位置、自然条件的差异，人文、经济方面也各有特点。传统文化艺术形式有诗词、戏曲、书法、国画等，而春节、元宵、清明、端午、中秋、重阳等则是中国重要的传统节日。</p> <p> 中国一词最早见于西周初年的青铜器“何尊”铭文中的“余其宅兹中国，自之辟民”，同时又以“华夏”、“中华”、“中夏”、“中原”、“诸夏”、“诸华”、“神州”、“九州”、“海内”等的代称出现。</p> <p> “华夏”一词最早见于周朝《尚书·周书·武成》，“华夏蛮貊，罔不率俾”。 《书经》曰：“冕服采装曰华，大国曰夏”。《尚书正义》注：“冕服华章曰华，大国曰夏”。“华”，是指华丽、兴旺；也有说上古华、夏同音，本一字。《左传》曰：“中国有礼仪之大，故称夏；有服章之美，谓之华。” 华是指汉服，夏指行周礼的大国，故中国有礼仪之邦、衣冠上国之美誉。</p> </div> </div> <div class="ax-padding ax-window-operate"> <div class="ax-row"> <div class="ax-col"> <div class="ax-explain">您还要看更多么？</div> </div> <div class="ax-btns"> <a href="###" class="ax-btn ax-text ax-ignore ax-window-close">取消</a> <a href="###" class="ax-btn ax-primary">确定</a> </div> </div> </div> </div> </div> <!--窗口-视频--> <div class="ax-window" data-mask="true" id="media02"> <div class="ax-window-overlay"></div> <div class="ax-window-contain"> <a href="###" class="ax-window-close"><i class="ax-iconfont ax-icon-close"></i></a> <div class="ax-window-title">关于中国</div> <div class="ax-window-content"> <video controls="controls" > <source src="https://src.axui.cn/v1.0/examples/media/video.mp4" type="video/mp4"> 您的浏览器不支持播放该视频，<a href="###" class="ax-color-primary">点击这里更新浏览器</a> </video> </div> <div class="ax-row ax-window-operate"> <a href="###" class="ax-col ax-col-12"><i class="ax-iconfont ax-icon-edit"></i></a> <span class="ax-gutter-line"></span> <a href="###" class="ax-col ax-col-12"><i class="ax-iconfont ax-icon-message-s"></i></a> <span class="ax-gutter-line"></span> <a href="###" class="ax-col ax-col-12"><i class="ax-iconfont ax-icon-link-open"></i></a> </div> </div> </div> <!--窗口-表格--> <div class="ax-window" data-size="large" data-mask="true" id="media03"> <div class="ax-window-overlay"></div> <div class="ax-window-contain"> <a href="###" class="ax-window-close"><i class="ax-iconfont ax-icon-close"></i></a> <div class="ax-window-title">关于中国</div> <div class="ax-window-content"> <table class="ax-table"> <thead> <tr> <th style="width: 240px;">情形</th> <th>描述</th> <th>回购和转让安排</th> <th style="width: 100px;">操作</th> </tr> </thead> <tbody> <tr> <td><div class="ax-align-left">1、激励对象主动解除劳动关系</div></td> <td><div class="ax-align-left">在劳动合同期内书面辞职</div></td> <td><div class="ax-align-left">按照原始出资价格加每年<span class="ax-color-danger">6%</span>利息回购</div></td> <td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-editing-fill" title="编辑"></a></div></td> </tr> <tr> <td><div class="ax-align-left">2、激励对象被解除劳动关系</div></td> <td><div class="ax-align-left">因违反法律、法规、甲方规章制度、双方协议等被解除劳动关系的</div></td> <td><div class="ax-align-left">按照原始出资价格回购，如果给公司造成损失，赔偿损失</div></td> <td></td> </tr> <tr> <td><div class="ax-align-left">3、丧失劳动能力并终止劳动关系</div></td> <td><div class="ax-align-left">激励对象因伤病等非工伤的原因</div></td> <td><div class="ax-align-left">按照原始出资价格加每年<span class="ax-color-danger">10%</span>的利息回购</div></td> <td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-editing-fill" title="编辑"></a></div></td> </tr> <tr> <td><div class="ax-align-left">4、职务变更（仅限于高管）</div></td> <td><div class="ax-align-left">职务调整，按照“股随岗走”原则，依据公司的《岗位与激励股权确定细则》确定乙方的激励股权，相应增加或者减少</div></td> <td><div class="ax-align-left">增加激励股权按照新的激励对象处理；减少激励股权按照应减少的激励股权出资额加<span class="ax-color-danger">10%</span>利率回购</div></td> <td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-editing-fill" title="编辑"></a></div></td> </tr> <tr> <td><div class="ax-align-left">5、退休</div></td> <td><div class="ax-align-left ax-more-ell">88退休且不签署《保密及竞业限制协议》</div></td> <td><div class="ax-align-left">按照原始出资价格加每年<span class="ax-color-danger">12</span>%的利息回购</div></td> <td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-editing-fill" title="编辑"></a></div></td> </tr> <tr> <td><div class="ax-align-left">6、死亡</div></td> <td><div class="ax-align-left">公司股份不能在公开市场自由转让的</div></td> <td><div class="ax-align-left">继承人与公司股东协商转让，如无人受让，则原始出资价格加每年<span class="ax-color-danger">12%</span>的利息回购</div></td> <td><div class="ax-operate"><a href="###" class="ax-iconfont ax-icon-editing-fill" title="编辑"></a></div></td> </tr> </tbody> </table> </div> <div class="ax-padding ax-window-operate"> <div class="ax-row"> <div class="ax-col"> <div class="ax-explain">您还要看更多么？</div> </div> <div class="ax-btns"> <a href="###" class="ax-btn ax-text ax-ignore ax-window-close">取消</a> <a href="###" class="ax-btn ax-primary">确定</a> </div> </div> </div> </div> </div> <!--窗口-搜索--> <div class="ax-window" data-mask="true" id="media04"> <div class="ax-window-overlay"></div> <div class="ax-window-contain"> <a href="###" class="ax-window-close"><i class="ax-iconfont ax-icon-close"></i></a> <div class="ax-window-title">关于中国</div> <div class="ax-window-content"> <div class="ax-break"></div> <div class="ax-padding-lr"> <div class="ax-form-group"> <div class="ax-row"> <div class="ax-col"> <input name="username" placeholder="输入关键字" value="" type="text"><span class="ax-pos-right"><a href="###" class="ax-iconfont ax-icon-close ax-val-none"></a><a href="###" class="ax-iconfont ax-icon-search"></a></span> </div> </div> </div> <label class="ax-radio"><input name="group-select-house" type="radio" value="1"><span>全选</span></label> <label class="ax-radio"><input name="group-select-house" type="radio" value="0"><span>取消全选</span></label> </div> <div class="ax-break-line"></div> <div class="ax-list-select"> <div class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><span class="ax-ell">去成都逛宽窄巷子</span></div> <label class="ax-checkbox ax-bone"><input name="house" value="2" type="checkbox"><span></span></label> </div> </div> <div class="ax-break-line"></div> <div class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><span class="ax-ell">到北京游八达岭长城</span></div> <label class="ax-checkbox ax-bone"><input name="house" value="2" type="checkbox"><span></span></label> </div> </div> <div class="ax-break-line"></div> <div class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><span class="ax-ell">下榻乌镇经典民宿</span></div> <label class="ax-checkbox ax-bone"><input name="house" value="2" type="checkbox"><span></span></label> </div> </div> <div class="ax-break-line"></div> <div class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><span class="ax-ell">自驾丽江三两天</span></div> <label class="ax-checkbox ax-bone"><input name="house" value="2" type="checkbox"><span></span></label> </div> </div> <div class="ax-break-line"></div> <div class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><span class="ax-ell">桂林漓江漂流</span></div> <label class="ax-checkbox ax-bone"><input name="house" value="2" checked="" disabled type="checkbox"><span></span></label> </div> </div> <div class="ax-break-line"></div> <div class="ax-info-block"> <div class="ax-row"> <div class="ax-col"><span class="ax-ell">井冈山瞻仰历史</span></div> <label class="ax-checkbox ax-bone"><input name="house" value="2" disabled type="checkbox"><span></span></label> </div> </div> </div> </div> <div class="ax-break-line"></div> <div class="ax-row ax-window-operate"> <a href="###" class="ax-col ax-col-12"><i class="ax-iconfont ax-icon-edit"></i></a> <span class="ax-gutter-line"></span> <a href="###" class="ax-col ax-col-12"><i class="ax-iconfont ax-icon-message-s"></i></a> <span class="ax-gutter-line"></span> <a href="###" class="ax-col ax-col-12"><i class="ax-iconfont ax-icon-link-open"></i></a> </div> </div> </div>
SweetAlert2弹窗 PLUGIN
本框架的SweetAlert2是非常优秀的窗口插件，作者持续更新，在github上很受欢迎。本框架目前修改版本是v9.10.8。github地址在这里，官方实例在这里。修改内容如下：
- 按钮由原来的
button改成了a - 新增
alt属性，可在按钮左侧添加提示文字 - 新增
operate和operateStyle属性，将按钮包裹住以便实现不同按钮布局 - 新增
audio和video多媒体属性，可显示更多多媒体内容 - 新增
window属性，在窗口头部显示窗口名称 - 新增
diyButton属性，可自定义超链按钮 - 新增
closePosition属性，可定义关闭按钮的位置 - 新增
main属性，将主要内容包裹住 - 新增
gutter属性，表示main和operate之间的边距 - 对弹窗的
html结构重新布局，更加灵活 - 原创一套
svg动画图标，替换原来的弹窗图标 - 修改源码使支持从
id获取html内容 - 对手机端做了适配处理
-
<link href="https://src.axui.cn/v1.0/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" > <script src="https://src.axui.cn/v1.0/src/plugins/sweetalert2/js/sweetalert2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#dialog01").click(function () { Swal.fire('美丽的中国'); }); $("#dialog02").click(function () { Swal.fire({ title:'美丽的中国', text: '中国是世界四大文明古国之一，有着悠久的历史。', icon:'warning', footer:'欲了解中华56个民族请点击这里', }); }); $("#dialog03").click(function () { Swal.fire({ window:'弹窗', title:'美丽的中国', text: '中国是世界四大文明古国之一，有着悠久的历史。', icon:'warning', }); }); $("#dialog04").click(function () { Swal.fire({ title:'美丽的中国', text: '中国是世界四大文明古国之一，有着悠久的历史。', backdrop:true, }); }); </script> -
<a href="###" class="ax-btn ax-primary" id="dialog01">普通弹窗</a> <a href="###" class="ax-btn ax-primary" id="dialog02">带注解</a> <a href="###" class="ax-btn ax-primary" id="dialog03">带窗口标题</a> <a href="###" class="ax-btn ax-primary" id="dialog04">带遮罩</a>
组合使用icon、title、text即可创建常规的信息提示窗口。title是指弹窗大标题，text是指窗口内容，icon是指操作提示图标，图标由本框架独立制作的svg格式图片，文件存放在images目录下，用户根据需要修改，一共有五中类型，详细如下：
success操作成功error操作错误warning操作警告info操作注意question操作疑问
-
<link href="https://src.axui.cn/v1.0/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" > <script src="https://src.axui.cn/v1.0/src/plugins/sweetalert2/js/sweetalert2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#saicon01").click(function () { Swal.fire({ icon:'success', title: '操作成功！', text: '支付信息将通过短信发送给您，注意查收！', type:'tips', showCancelButton: false, customClass: { container: 'ax-dialog', confirmButton: 'ax-btn ax-primary ax-longer', }, }); }); $("#saicon02").click(function () { Swal.fire({ icon:'error', title: '操作失败!', text: '请重打开页面输入正确金额！', type:'tips', showCancelButton: false, customClass: { container: 'ax-dialog', confirmButton: 'ax-btn ax-primary ax-longer', }, }); }); $("#saicon03").click(function () { Swal.fire({ icon:'warning', title: '注意事项!', text: '必须在两日内完成资料上传！', type:'tips', showCancelButton: false, customClass: { container: 'ax-dialog', confirmButton: 'ax-btn ax-primary ax-longer', }, }); }); $("#saicon04").click(function () { Swal.fire({ icon:'info', title: '已经提交!', text: '请等待管理员审核，详情进入个人中心-我的提交！', type:'tips', showCancelButton: false, customClass: { container: 'ax-dialog', confirmButton: 'ax-btn ax-primary ax-longer', }, }); }); $("#saicon05").click(function () { Swal.fire({ icon:'question', title: '我有疑问', text: '请详细描述您的问题，提交给我们，谢谢您！', type:'tips', showCancelButton: false, customClass: { container: 'ax-dialog', confirmButton: 'ax-btn ax-primary ax-longer', }, }); }); </script> -
<a href="###" class="ax-btn ax-primary" id="saicon01">操作成功</a> <a href="###" class="ax-btn ax-primary" id="saicon02">操作失败</a> <a href="###" class="ax-btn ax-primary" id="saicon03">操作警告</a> <a href="###" class="ax-btn ax-primary" id="saicon04">操作注意</a> <a href="###" class="ax-btn ax-primary" id="saicon05">操作疑问</a>
本框架对插件的按钮使用operateStyle属性定义了三种布局风格。参数如下：
center居中实体按钮right居右实体按钮lineIOS线装按钮
对按钮的综合运用请参见按钮。
-
<link href="https://src.axui.cn/v1.0/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" > <script src="https://src.axui.cn/v1.0/src/plugins/sweetalert2/js/sweetalert2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#sabtn01").click(function () { Swal.fire({ icon:'success', title: '操作成功', text: '支付信息将通过短信发送给您，注意查收！', operateStyle:'center', }); }); $("#sabtn02").click(function () { Swal.fire({ icon:'success', title: '操作成功', text: '支付信息将通过短信发送给您，注意查收！', operateStyle:'right', }); }); $("#sabtn03").click(function () { Swal.fire({ icon:'success', title: '操作成功', text: '支付信息将通过短信发送给您，注意查收！', operateStyle:'line', gutter:'54px' }); }); $("#sabtn04").click(function () { Swal.fire({ icon:'success', title: '操作成功', text: '支付信息将通过短信发送给您，注意查收！', alt: '您还要看更多么？', customClass: { confirmButton: '', cancelButton: 'ax-btn ax-text', }, }); }); </script> -
<a href="###" class="ax-btn ax-primary" id="sabtn01">居中布局按钮</a> <a href="###" class="ax-btn ax-primary" id="sabtn02">右侧布局按钮</a> <a href="###" class="ax-btn ax-primary" id="sabtn03">IOS线条按钮</a> <a href="###" class="ax-btn ax-primary" id="sabtn04">自动布局按钮</a>
原插件支持表单的显示和验证。本框架美化了插件中部分表单样式，限于插件的缺陷不方便改造，日后改进。
-
<link href="https://src.axui.cn/v1.0/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" > <script src="https://src.axui.cn/v1.0/src/plugins/sweetalert2/js/sweetalert2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#saform01").click(function () { Swal.fire({ input: 'text', title: '填写内容', inputPlaceholder: '输入内容...', padding:'28px' }) }); $("#saform02").click(function () { Swal.fire({ input: 'textarea', title: '填写内容', inputPlaceholder: '输入内容...', padding:'28px' }) }); $("#saform03").click(function () { Swal.fire({ input: 'select', title: '填写内容', inputOptions: { CHN: '中国', USA: '美国', CAN: '加拿大', AUS: '澳大利亚' }, inputPlaceholder: '选择国家...', padding:'28px' }) }); $("#saform04").click(function () { Swal.fire({ input: 'radio', title: '填写内容', padding:'28px', inputOptions: { CHN: '中国', USA: '美国', CAN: '加拿大', AUS: '澳大利亚' }, inputPlaceholder: '选择国家...', inputValidator: (value) => { if (!value) { return '请选择!' } } }) }); $("#saform05").click(function () { Swal.fire({ input: 'checkbox', title: '填写内容', inputPlaceholder: '我是中国人', padding:'28px', inputValidator: (value) => { if (!value) { return '请选择!' } } }) }); $("#saform06").click(function () { Swal.fire({ input: 'file', title: '选择文件', inputPlaceholder: '输入内容...', padding:'28px', }) }); $("#saform07").click(function () { Swal.fire({ input: 'range', inputAttributes: { min: 8, max: 120, step: 1 }, inputValue: 25, title: '滑动选择数值', padding:'28px', }) }); </script> -
<a href="###" class="ax-btn ax-primary" id="saform01">input表单</a> <a href="###" class="ax-btn ax-primary" id="saform02">textarea表单</a> <a href="###" class="ax-btn ax-primary" id="saform03">select表单</a> <a href="###" class="ax-btn ax-primary" id="saform04">radio表单</a> <a href="###" class="ax-btn ax-primary" id="saform05">checkbox表单</a> <a href="###" class="ax-btn ax-primary" id="saform06">file表单</a> <a href="###" class="ax-btn ax-primary" id="saform07">range表单</a> <a href="###" class="ax-btn ax-primary" id="saform08">综合表单</a>
本框架已经制作了多媒体内容的窗口展示方式，复制即可使用。多媒体可用参数如下。
imageUrl图片路径imageWidth图片宽度，比如100px、auto或100%imageHeight图片高度，比如100px、auto或100%imageAlt图片alt属性值videoUrl视频路径videoWidth视频宽度，，比如100px、auto或100%videoHeight视频高度，比如100px、auto或100%videoControls视频是否需要控制器，true或者false，默认是true显示控制器videoAutoplay视频是否需要自动播放，true或者false，默认是true显示控制器audioUrl音频路径audioWidth音频宽度，比如100px、auto或100%audioHeight音频高度，比如100px、auto或100%audioControls音频是否需要控制器，true或者false，默认是true显示控制器audioAutoplay音频是否需要自动播放，true或者false，默认是true显示控制器
-
<link href="https://src.axui.cn/v1.0/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" > <script src="https://src.axui.cn/v1.0/src/plugins/sweetalert2/js/sweetalert2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#samedia01").click(function () { Swal.fire({ imageUrl: 'examples/images/china01.jpg', imageWidth: '100%', imageHeight: 'auto', imageAlt: '美丽的中国', titleText: '美丽的中国', text: '中国是世界四大文明古国之一，有着悠久的历史。', closePosition:"out", }); }); $("#samedia02").click(function () { Swal.fire({ videoUrl: 'https://src.axui.cn/v1.0/examples/media/video.mp4', videoWidth: '100%', videoHeight: 'auto', videoControls: 'true', videoAutoplay: 'false', titleText: '美丽的中国', text: '中国是世界四大文明古国之一，有着悠久的历史。', closePosition:"out", }); }); $("#samedia03").click(function () { Swal.fire({ audioUrl: 'https://src.axui.cn/v1.0/examples/media/audio.mp3', audioWidth: '100%', audioHeight: 'auto', audioControls: 'true', audioAutoplay: 'false', titleText: '美丽的中国', text: '中国是世界四大文明古国之一，有着悠久的历史。', closePosition:"out", }); }); var media = $("#media-txt").html(); $("#samedia04").click(function () { Swal.fire({ html: media, heightAuto:'false', closePosition:"out", }); }); </script> -
<a href="###" class="ax-btn ax-primary" id="samedia01">图片弹窗</a> <a href="###" class="ax-btn ax-primary" id="samedia02">视频弹窗</a> <a href="###" class="ax-btn ax-primary" id="samedia03">音频弹窗</a> <a href="###" class="ax-btn ax-primary" id="samedia04">文章弹窗</a> <div id="media-txt" style="display: none;"> <div class="ax-article ax-padding"> <p> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p> <p> 中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。</p> <video controls="controls"> <source src="https://src.axui.cn/v1.0/examples/media/video.mp4" type="video/mp4"> 您的浏览器不支持播放该视频，<a href="###" class="ax-color-primary">点击这里更新浏览器</a> </video> <p> 中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。</p> <audio src="https://src.axui.cn/v1.0/examples/media/audio.mp3" controls="controls"> 您的浏览器不支持播放该音频，<a href="###" class="ax-color-primary">点击这里更新浏览器</a> </audio> <p> 中国文化渊远流长、博大精深、绚烂多彩，是东亚文化圈的文化宗主国，在世界文化体系内占有重要地位，由于各地的地理位置、自然条件的差异，人文、经济方面也各有特点。传统文化艺术形式有诗词、戏曲、书法、国画等，而春节、元宵、清明、端午、中秋、重阳等则是中国重要的传统节日。</p> <p> 中国一词最早见于西周初年的青铜器“何尊”铭文中的“余其宅兹中国，自之辟民”，同时又以“华夏”、“中华”、“中夏”、“中原”、“诸夏”、“诸华”、“神州”、“九州”、“海内”等的代称出现。</p> <p> “华夏”一词最早见于周朝《尚书·周书·武成》，“华夏蛮貊，罔不率俾”。 《书经》曰：“冕服采装曰华，大国曰夏”。《尚书正义》注：“冕服华章曰华，大国曰夏”。“华”，是指华丽、兴旺；也有说上古华、夏同音，本一字。《左传》曰：“中国有礼仪之大，故称夏；有服章之美，谓之华。” 华是指汉服，夏指行周礼的大国，故中国有礼仪之邦、衣冠上国之美誉。</p> </div> </div>
在原插件基础上，本框架新增了一个自定义超链按钮，参数如下：
diyButton按钮文字diyButtonLink按钮链接diyButtonTarget打开方式，可选：_blank、_self、_parent和_topcustomClass:{diyButton:''}按钮样式
如果不想显示按钮，diyButtonLink为空即可。
-
<link href="https://src.axui.cn/v1.0/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" > <script src="https://src.axui.cn/v1.0/src/plugins/sweetalert2/js/sweetalert2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#sadiy01").click(function () { Swal.fire({ titleText: '美丽的中国', text: '中国是世界四大文明古国之一，有着悠久的历史。', diyButton:'自定义按钮', diyButtonLink:'http://www.baidu.com', diyButtonTarget:'_blank', }); }); $("#sadiy02").click(function () { Swal.fire({ titleText: '美丽的中国', text: '中国是世界四大文明古国之一，有着悠久的历史。', diyButton:'自定义按钮', diyButtonLink:'http://www.baidu.com', diyButtonTarget:'_blank', operateStyle:'line', gutter:'14px' }); }); </script> -
<a href="###" class="ax-btn ax-primary" id="sadiy01">自定义普通按钮</a> <a href="###" class="ax-btn ax-primary" id="sadiy02">自定义线状按钮</a>
在原插件基础上，本框架新增了关闭按钮的位置属性closePosition，参数如下：
in在窗口里，默认out在窗口外侧右上角center在窗口外侧底部，圆形按钮
-
<link href="https://src.axui.cn/v1.0/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" > <script src="https://src.axui.cn/v1.0/src/plugins/sweetalert2/js/sweetalert2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#saclose01").click(function () { Swal.fire({ titleText: '美丽的中国', text: '中国是世界四大文明古国之一，有着悠久的历史。', closePosition:'in', backdrop:true, padding:"28px 14px" }); }); $("#saclose02").click(function () { Swal.fire({ titleText: '美丽的中国', text: '中国是世界四大文明古国之一，有着悠久的历史。', closePosition:'out', backdrop:true, padding:"28px 14px" }); }); $("#saclose03").click(function () { Swal.fire({ titleText: '美丽的中国', text: '中国是世界四大文明古国之一，有着悠久的历史。', closePosition:'center', backdrop:true, padding:"28px 14px" }); }); $("#saclose04").click(function () { Swal.fire({ titleText: '美丽的中国', text: '中国是世界四大文明古国之一，有着悠久的历史。', closePosition:'in', padding:"28px 14px" }); }); $("#saclose05").click(function () { Swal.fire({ titleText: '美丽的中国', text: '中国是世界四大文明古国之一，有着悠久的历史。', closePosition:'out', padding:"28px 14px" }); }); $("#saclose06").click(function () { Swal.fire({ titleText: '美丽的中国', text: '中国是世界四大文明古国之一，有着悠久的历史。', closePosition:'center', padding:"28px 14px" }); }); </script> -
<a href="###" class="ax-btn ax-primary" id="saclose01">关闭按钮在里面</a> <a href="###" class="ax-btn ax-primary" id="saclose02">关闭按钮在外面</a> <a href="###" class="ax-btn ax-primary" id="saclose03">关闭按钮在下方居中</a> <div class="ax-break"></div> <a href="###" class="ax-btn ax-primary" id="saclose04">关闭按钮在里面(无遮罩)</a> <a href="###" class="ax-btn ax-primary" id="saclose05">关闭按钮在外面(无遮罩)</a> <a href="###" class="ax-btn ax-primary" id="saclose06">关闭按钮在下方居中(无遮罩)</a>
在原插件基础上扩展，对页面中的html内容可通过id进行引用，对参数title、titleText、text、html都有效。
-
<link href="https://src.axui.cn/v1.0/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" > <script src="https://src.axui.cn/v1.0/src/plugins/sweetalert2/js/sweetalert2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#said01").click(function () { Swal.fire({ titleText: '美丽的中国', html: '#id01', }); }); $("#said02").click(function () { Swal.fire({ html: '#id02', closePosition:"out", window:"填写表单", }); }); </script> -
<a href="###" class="ax-btn ax-primary" id="said01">引用文字</a> <a href="###" class="ax-btn ax-primary" id="said02">引用表单</a> <div id="id01" style="display: none"> <div class="ax-article ax-padding"> <p> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</p> <p> 中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而形成国家，后历经多次民族交融和朝代更迭，直至形成多民族国家的大一统局面。20世纪初辛亥革命后，君主政体退出历史舞台，共和政体建立。1949年中华人民共和国成立后，在中国大陆建立了人民代表大会制度的政体。</p> <video controls="controls"> <source src="https://src.axui.cn/v1.0/examples/media/video.mp4" type="video/mp4"> 您的浏览器不支持播放该视频，<a href="###" class="ax-color-primary">点击这里更新浏览器</a> </video> <p> 中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。</p> <audio src="https://src.axui.cn/v1.0/examples/media/audio.mp3" controls="controls"> 您的浏览器不支持播放该音频，<a href="###" class="ax-color-primary">点击这里更新浏览器</a> </audio> <p> 中国文化渊远流长、博大精深、绚烂多彩，是东亚文化圈的文化宗主国，在世界文化体系内占有重要地位，由于各地的地理位置、自然条件的差异，人文、经济方面也各有特点。传统文化艺术形式有诗词、戏曲、书法、国画等，而春节、元宵、清明、端午、中秋、重阳等则是中国重要的传统节日。</p> <p> 中国一词最早见于西周初年的青铜器“何尊”铭文中的“余其宅兹中国，自之辟民”，同时又以“华夏”、“中华”、“中夏”、“中原”、“诸夏”、“诸华”、“神州”、“九州”、“海内”等的代称出现。</p> <p> “华夏”一词最早见于周朝《尚书·周书·武成》，“华夏蛮貊，罔不率俾”。 《书经》曰：“冕服采装曰华，大国曰夏”。《尚书正义》注：“冕服华章曰华，大国曰夏”。“华”，是指华丽、兴旺；也有说上古华、夏同音，本一字。《左传》曰：“中国有礼仪之大，故称夏；有服章之美，谓之华。” 华是指汉服，夏指行周礼的大国，故中国有礼仪之邦、衣冠上国之美誉。</p> </div> </div> <div id="id02" style="display: none"> <div class="ax-emulate"> <form> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">姓名：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div> </div> <span class="ax-form-txt ax-color-danger ax-iconfont ax-icon-close-o-fill"></span> </div> </div> <div class="ax-break-line"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">户型：</div> <div class="ax-form-con"> <div class="ax-form-input"> <div class="ax-row"> <div class="ax-col ax-col-8"><input name="username" placeholder="几室" value="" type="text"><span class="ax-pos-right">室</span></div> <span class="ax-gutter-md"></span> <div class="ax-col ax-col-8"><input name="username" placeholder="几厅" value="" type="text"><span class="ax-pos-right">厅</span></div> <span class="ax-gutter-md"></span> <div class="ax-col ax-col-8"><input name="username" placeholder="几卫" value="" type="text"><span class="ax-pos-right">卫</span></div> </div> </div> </div> <a href="###" class="ax-form-btn ax-btn ax-danger ax-icon ax-round"><span class="ax-iconfont ax-icon-trash-alt-fill"></span></a><a href="###" class="ax-form-btn ax-btn ax-icon ax-round"><span class="ax-iconfont ax-icon-trash-alt-fill"></span></a> </div> </div> <div class="ax-break-line"></div> <div class="ax-form-group"> <div class="ax-flex-row"> <div class="ax-form-label">验证码：</div> <div class="ax-form-con"> <div class="ax-form-input"><input name="username" placeholder="输入验证码" value="" type="text"></div> </div> <div class="ax-form-txt ax-color-primary ax-disabled">获取验证码</div> </div> </div> <div class="ax-break-line"></div> </form> </div> </div>
联动弹窗
-
<link href="https://src.axui.cn/v1.0/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" > <script src="https://src.axui.cn/v1.0/src/plugins/sweetalert2/js/sweetalert2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#salink01").click(function () { Swal.fire({ type: 'warning', // 弹框类型 title: '注销帐号', //标题 text: "注销后将无法恢复，请谨慎操作！", showCancelButton: true, padding:'28px', gutter:'14px', }).then((isConfirm) => { try { if (isConfirm.value) { Swal.fire("成功", "点击了确定", "success"); } else { Swal.fire("取消", "点击了取消", "error"); } } catch (e) { alert(e); } }); }); $("#salink02").click(function () { Swal.fire({ title: '领取你的寻龙装备！', input: 'select', html: '', inputAttributes: { autocapitalize: 'off' }, showLoaderOnConfirm: true, preConfirm: (login) => { return fetch(`//api.github.com/users/${login}`) .then(response => { if (!response.ok) { throw new Error(response.statusText) } return response.json() }) .catch(error => { Swal.showValidationMessage( `请求失败: ${error}` ) }) }, allowOutsideClick: () => !Swal.isLoading() }).then((result) => { if (result.value) { Swal.fire({ title: `${result.value.login}'s avatar`, imageUrl: result.value.avatar_url }) } }) }); </script> -
<a href="###" class="ax-btn ax-primary" id="salink01">确认后给出结果</a> <a href="###" class="ax-btn ax-primary" id="salink02">引用表单</a>
Toast，更多用法见Toast
-
<link href="https://src.axui.cn/v1.0/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" > <script src="https://src.axui.cn/v1.0/src/plugins/sweetalert2/js/sweetalert2.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#satoast01").click(function () { Swal.fire({ toast: true, position: 'top-end', icon: 'success', title: '操作成功！', showCloseButton:false, text: '支付信息将通过短信发送给您，注意查收！', timer: 3000, timerProgressBar: true, onOpen: (toast) => { toast.addEventListener('mouseenter', Swal.stopTimer) toast.addEventListener('mouseleave', Swal.resumeTimer) } }); }); $("#satoast02").click(function () { Swal.fire({ toast: true, position: 'top-end', icon: 'success', title: '操作成功！', text: '支付信息将通过短信发送给您，注意查收！', }); }); </script> -
<a href="###" class="ax-btn ax-primary" id="satoast01">定时关闭Toast</a> <a href="###" class="ax-btn ax-primary" id="satoast02">手动关闭Toast</a>