云路UI - 模态框

version 2.0 模态框

tips类弹窗

适用场景

适用于页面简单提示型弹窗

tips弹窗生成代码

$('#tips').on('click',function(){ var option = { x:'50px', //center为上下居中，(left,right)像素为距页面顶部距离（默认居中） y:'10px', // center为左右居中，(top,bottom)像素为距离页面左边距离（默认居中） closeTime:'3', //弹窗自动关闭时间（默认为2s） type:'error', //弹窗状态类型 ,暂时有三种 success（加入成功）noChoose(未选择) existed（已经加入）error（加入失败）（必传） text:'操作失败', //状态对应提示信息（必传） distance: '10px' //距离页面边距（默认为10） } var modal = new TipsModal(option); modal.init(); })

咨询弹窗

适用场景

适用于页面咨询弹窗

咨询弹窗生成代码

$('#zx').on('click',function(){ var option = { telphone:"024-2225 2258", expert:"13458794859" } var modal = new ReferModal(option); modal.init(); })

确认/取消类弹窗

适用场景

涉及到带有【确定】、【取消】按钮的简单提示性操作。

弹窗生成代码

$('#two').on('click', function () { var str = ' <div>' + '<span>确定提交数据吗</span>' + ' </div> '; var modal = new HtModal($(str), function () { //点击确定触发事件 }, 2, '模态框'); modal.init(); });

确认类弹窗

适用场景

涉及到【确定】的简单提示性操作。

弹窗生成代码

                            $('#one').on('click', function () {
                                var modal = new HtModal('嗨，你好吗', function () {
                                    //点击确定触发事件
                                }, 1, '模态框');
                                modal.init();
                            });

通知类弹窗

适用场景

提示性质的弹窗。

弹窗生成代码

                            $('#zero').on('click', function () {
                                var modal = new HtModal('嗨，你好吗', '', 0, '模态框');
                                modal.initReminder();
                            });

成功类弹窗

适用场景

提示性质的弹窗。

弹窗生成代码

                            $('#success').on('click', function () {
                                var modal = new HtModal('嗨，你好吗', '', 2, '模态框','','success');
                                modal.init();
                            });

失败类弹窗

适用场景

提示性质的弹窗。

弹窗生成代码

                            $('#fail').on('click', function () {
                                var modal = new HtModal('嗨，你好吗', '', 2, '模态框','','fail');
                                modal.init();
                            });

多内容弹窗

适用场景

如果弹窗内容较多，不适合用js拼接字符串显示内容，则考虑选用这类弹窗，即bootstrap弹窗，弹窗内容使用html静态编写，易于编写和维护。

添加data-backdrop="static": 点击模态框外部时不会关闭模态框

添加data-keyboard="false": 按下esc键时不会关闭模态框

弹窗生成代码

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".myModal"> 弹窗触发按钮 </button>  <div class="modal fade myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"></span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ....................................... ....................................... ........................................ ...............content................. ....................................... ....................................... .......................................... ................content................... .......................................... ......................................... .......................................... .......................................... ..................content.................. ......................................... .......................................... </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">提交</button> <button type="button" class="btn btn-default" data-dismiss="modal">取消 </button> </div> </div> </div> </div>