Dialog 对话框

纯html+css弹窗 JS

本框架撰写一套完整的自适应弹窗,可简单配合js或jq使用,也可以封装为插件使用。窗口中的ax-window-titleax-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/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" >
            <script src="https://src.axui.cn/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/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" >
            <script src="https://src.axui.cn/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表单元素,可适用所有风格的表单元素,并自适应手机。

表单窗口
姓名:
籍贯:
区/县
头像:
李创江
您还要填写更多么?
表单窗口
您还要填写更多么?
表单窗口
账号
还可以输入8个文字
密码
忘记了密码?
填写错误!
验证码
您还要填写更多么?
  •         <link href="https://src.axui.cn/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" >
            <script src="https://src.axui.cn/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/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/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/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" >
            <script src="https://src.axui.cn/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/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" >
            <script src="https://src.axui.cn/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/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" >
            <script src="https://src.axui.cn/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属性使用smallmiddlelarge。默认是middle

  • small 宽300px
  • middle 默认宽500px
  • large 全宽
  • full 满屏
关于中国

  中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。

关于中国

  中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。

关于中国

  中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。

关于中国

  中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。

  中国是世界四大文明古国之一,有着悠久的历史,距今约5000年前,以中原地区为中心开始出现聚落组织进而形成国家,后历经多次民族交融和朝代更迭,直至形成多民族国家的大一统局面。20世纪初辛亥革命后,君主政体退出历史舞台,共和政体建立。1949年中华人民共和国成立后,在中国大陆建立了人民代表大会制度的政体。

  中国疆域辽阔、民族众多,先秦时期的华夏族在中原地区繁衍生息,到了汉代通过文化交融使汉族正式成型,奠定了中国主体民族的基础。后又通过与周边民族的交融,逐步形成统一多民族国家的局面,而人口也不断攀升,宋代中国人口突破一亿,清朝时期人口突破四亿,到2005年中国人口已突破十三亿。

  中国文化渊远流长、博大精深、绚烂多彩,是东亚文化圈的文化宗主国,在世界文化体系内占有重要地位,由于各地的地理位置、自然条件的差异,人文、经济方面也各有特点。传统文化艺术形式有诗词、戏曲、书法、国画等,而春节、元宵、清明、端午、中秋、重阳等则是中国重要的传统节日。

  中国一词最早见于西周初年的青铜器“何尊”铭文中的“余其宅兹中国,自之辟民”,同时又以“华夏”、“中华”、“中夏”、“中原”、“诸夏”、“诸华”、“神州”、“九州”、“海内”等的代称出现。

  “华夏”一词最早见于周朝《尚书·周书·武成》,“华夏蛮貊,罔不率俾”。 《书经》曰:“冕服采装曰华,大国曰夏”。《尚书正义》注:“冕服华章曰华,大国曰夏”。“华”,是指华丽、兴旺;也有说上古华、夏同音,本一字。《左传》曰:“中国有礼仪之大,故称夏;有服章之美,谓之华。” 华是指汉服,夏指行周礼的大国,故中国有礼仪之邦、衣冠上国之美誉。

  •         <link href="https://src.axui.cn/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" >
            <script src="https://src.axui.cn/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/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" >
            <script src="https://src.axui.cn/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/examples/media/video.mp4" type="video/mp4">
                                                 您的浏览器不支持播放该视频,<a href="###" class="ax-color-primary">点击这里更新浏览器</a>
                                            </video>
                                            <p>  中国疆域辽阔、民族众多,先秦时期的华夏族在中原地区繁衍生息,到了汉代通过文化交融使汉族正式成型,奠定了中国主体民族的基础。后又通过与周边民族的交融,逐步形成统一多民族国家的局面,而人口也不断攀升,宋代中国人口突破一亿,清朝时期人口突破四亿,到2005年中国人口已突破十三亿。</p>
                                            <audio src="https://src.axui.cn/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/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属性,可在按钮左侧添加提示文字
  • 新增operateoperateStyle属性,将按钮包裹住以便实现不同按钮布局
  • 新增audiovideo多媒体属性,可显示更多多媒体内容
  • 新增window属性,在窗口头部显示窗口名称
  • 新增diyButton属性,可自定义超链按钮
  • 新增closePosition属性,可定义关闭按钮的位置
  • 新增main属性,将主要内容包裹住
  • 新增gutter属性,表示mainoperate之间的边距
  • 对弹窗的html结构重新布局,更加灵活
  • 原创一套svg动画图标,替换原来的弹窗图标
  • 修改源码使支持从id获取html内容
  • 对手机端做了适配处理
  •         <link href="https://src.axui.cn/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" >
            <script src="https://src.axui.cn/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>
                                        

组合使用icontitletext即可创建常规的信息提示窗口。title是指弹窗大标题,text是指窗口内容,icon是指操作提示图标,图标由本框架独立制作的svg格式图片,文件存放在images目录下,用户根据需要修改,一共有五中类型,详细如下:

  • success 操作成功
  • error 操作错误
  • warning 操作警告
  • info 操作注意
  • question 操作疑问
  •         <link href="https://src.axui.cn/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" >
            <script src="https://src.axui.cn/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 居右实体按钮
  • line IOS线装按钮
  • 对按钮的综合运用请参见按钮

  •         <link href="https://src.axui.cn/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" >
            <script src="https://src.axui.cn/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/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" >
            <script src="https://src.axui.cn/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/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" >
            <script src="https://src.axui.cn/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/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/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/examples/media/video.mp4" type="video/mp4">
                                     您的浏览器不支持播放该视频,<a href="###" class="ax-color-primary">点击这里更新浏览器</a>
                                </video>
                                <p>  中国疆域辽阔、民族众多,先秦时期的华夏族在中原地区繁衍生息,到了汉代通过文化交融使汉族正式成型,奠定了中国主体民族的基础。后又通过与周边民族的交融,逐步形成统一多民族国家的局面,而人口也不断攀升,宋代中国人口突破一亿,清朝时期人口突破四亿,到2005年中国人口已突破十三亿。</p>
                                <audio src="https://src.axui.cn/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和_top
  • customClass:{diyButton:''} 按钮样式

如果不想显示按钮,diyButtonLink为空即可。

  •         <link href="https://src.axui.cn/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" >
            <script src="https://src.axui.cn/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/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" >
            <script src="https://src.axui.cn/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进行引用,对参数titletitleTexttexthtml都有效。

  •         <link href="https://src.axui.cn/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" >
            <script src="https://src.axui.cn/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/examples/media/video.mp4" type="video/mp4">
                                         您的浏览器不支持播放该视频,<a href="###" class="ax-color-primary">点击这里更新浏览器</a>
                                    </video>
                                    <p>  中国疆域辽阔、民族众多,先秦时期的华夏族在中原地区繁衍生息,到了汉代通过文化交融使汉族正式成型,奠定了中国主体民族的基础。后又通过与周边民族的交融,逐步形成统一多民族国家的局面,而人口也不断攀升,宋代中国人口突破一亿,清朝时期人口突破四亿,到2005年中国人口已突破十三亿。</p>
                                    <audio src="https://src.axui.cn/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/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" >
            <script src="https://src.axui.cn/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/src/plugins/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css" >
            <script src="https://src.axui.cn/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>