Sivo 悉见

模态框外部链接表单使用方法

匿名 · 更新于 2017/12/29

按钮

{//添加代理商权限}
<if condition="auth_check('Admin/Agent/addAgent')">
    <a class="btn yx operate" data-func="add_agent" data-requestlink="{:U('Admin/Agent/addAgent')}"><i class="fa fa-user-plus" >  添加代理商</i></a>
</if>
{//添加代理商权限结束}

 
 单击按钮执行方法 
/**
 * 添加代理商
 *
 */
function add_agent() {
    creat_model('添加代理商', '', get_func_name(arguments),680,'addAgent');

} 


 
外部链接的html页面代码 
<style type="text/css">
    .slide {
        background: #FFF;
        border: 1px solid #CCC;
        border-top: none;
        box-shadow: 2px 2px 5px #999999;
        z-index: 999;
    }


    .slide > ul {
        margin-bottom: 0px;
    }


    .slide > ul > li {
        line-height: 28px;
        list-style: none;
        text-align: left;
        padding-left: 10px;
        box-sizing: border-box;
    }


    .slide > ul > li:hover {
        background: rgba(204, 204, 204, 0.5);
    }


    .slidesd {
        background: #FFF;
        border: 1px solid #CCC;
        border-top: none;
        box-shadow: 2px 2px 5px #999999;
        z-index: 999;
    }


    .slidesd > ul {
        margin-bottom: 0px;
    }


    .slidesd > ul > li {
        line-height: 28px;
        list-style: none;
        text-align: left;
        padding-left: 10px;
        box-sizing: border-box;
    }


    .slidesd > ul > li:hover {
        background: rgba(204, 204, 204, 0.5);
    }


    .slideqd {
        background: #FFF;
        border: 1px solid #CCC;
        border-top: none;
        box-shadow: 2px 2px 5px #999999;
        z-index: 999;
    }


    .slideqd > ul {
        margin-bottom: 0px;
    }


    .slideqd > ul > li {
        line-height: 28px;
        list-style: none;
        text-align: left;
        padding-left: 10px;
        box-sizing: border-box;
    }


    .slideqd > ul > li:hover {
        background: rgba(204, 204, 204, 0.5);
    }


    ul, li {
        margin: 0px;
        padding: 0px
    }


    .dele {
        position: absolute;
        left: 182px;
        top: 0px;
        display: none;
        cursor: pointer;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        background: #666;
        color: #FFF;
        text-align: center;
        line-height: 15px;
    }


    .form-group{
        overflow: hidden;
    }
</style>


<form style="width:100%;height:100%" action="#" method="POST" id="yx_form">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
            <span aria-hidden="true">×</span>
            <span class="sr-only">关闭</span></button>
        <h4 class="modal-title">添加代理商</h4>
    </div>
    <div class="modal-body" style="width:100%;height:100%">
        <p class="form-group"><label>代理级别</label><select class="form-control" name="level">
            <volist name="agentLevel" id="vo">
                <option  value="{$vo.level}" <if condition="($vo['level'] eq 1)">selected="selected"</if> >{$vo.title}</option>
            </volist>
        </select></p>


        <p class="form-group parent_agent yx-hide" ><label>上级代理</label><input name="parent_agent_name"
                                                       type="text"
                                                       autocomplete="off"
                                                       value="{$orderInfo['owner_title']}"
                                                       placeholder="请填写上级代理关键字"
                                                       class="form-control search parent_agent">
            <input name="parent_agent_id" type="hidden" value="{$orderInfo['owner_id']|default=0}">


            <div class="slide owner" style="position: absolute; top: 112px; left: 156px; width: 300px; display: none;">
                <ul>


                </ul>
            </div>
        </p>


        <p class="form-group"><label>代理商名称</label><input name="title" value="{$orderInfo.hotel_price_standard}" type="text"
                                                        class="form-control" placeholder="请填写代理商名称"></p>


        <p class="form-group"><label>用户名</label><input name="uname" value="{$orderInfo.hotel_price_standard}" type="text"
                                                         class="form-control" placeholder="请填写代理商登录用户名"></p>


        <p class="form-group"><label>密码</label><input name="password" value="{$orderInfo.hotel_price_standard}" type="password"
                                                       class="form-control" placeholder="请填写代理商登录密码"></p>


        <p class="form-group"><label>法人</label><input name="legal_person" value="{$orderInfo.hotel_price_standard}" type="text"
                                                       class="form-control" placeholder="请填写代理商企业法人姓名"></p>


        <p class="form-group"><label>法人身份证</label><input name="idcard" value="{$orderInfo.hotel_price_standard}" type="text"
                                                      class="form-control" placeholder="请填写代理商企业法人身份证号"></p>


        <p class="form-group"><label>联系人</label><input name="contact" value="{$orderInfo.hotel_price_standard}" type="text"
                                                         class="form-control" placeholder="请填写代理商联系人"></p>
        <p class="form-group"><label>联系电话</label><input name="phone" value="{$orderInfo.hotel_price_standard}" type="text"
                                                       class="form-control" placeholder="请填写代理商联系电话"></p>


        <p class="form-group"><label>省市区（县）</label>


            <select class="form-control" style="width: 24%" name="province_id">
                <option value="-1" selected="selected">选择省</option>
            </select>
            <select class="form-control" style="width: 24%" name="city_id">
                <option value="-1" selected="selected">选择市</option>
            </select>
            <select class="form-control" style="width: 25%" name="county_id">
                <option value="-1" selected="selected">选择区（县）</option>
            </select>
        </p>


        <p class="form-group"><label>详细地址</label><input name="address" value="{$orderInfo.hotel_price_standard}" type="text"
                                                       class="form-control" placeholder="请填写代理商邮箱"></p>


        <p class="form-group"><label>邮箱（选填）</label><input name="email" value="{$orderInfo.hotel_price_standard}" type="text"
                                                          class="form-control" placeholder="请填写代理商邮箱"></p>


        <p class="form-group"><label>相关证件上传</label>
                <span id="thelist_list_pic">
                    <volist name="productInfo['LifeProductImg'][1]" id="vo">
                        <img src="{$vo.img_url}" width="100" height="100" />
                        <input type="hidden" name="list_pic[]" value="{$vo.img_url}">
                        <input type="hidden" name="list_pic_sort[]" value="{$vo.sort}">
                        <input type="hidden" name="is_face[]" value="{$vo.is_face}" >
                    </volist>
                    <span id="list_pic_picker">选择文件</span>
                </span>
                <span class="help-block m-b-none" style="margin-left: 100px; display: block; margin-top: 10px; position: static">请上传营业执照、法人身份证、办公环境、授权书等相关资料</span>
        </p>


        <input name="id" type="hidden" value="{$orderInfo.id|default=0}">


    </div>


    <div class="modal-footer">
        <button type="button" class="btn btn-white" data-dismiss="modal" data-btn="close-modal" data-target="addmodal">
            关闭
        </button>
        <button type="submit" class="btn btn-primary" data-btn="adduser">确认设置</button>
    </div>
</form>
<!--单选多选按钮-->
<!--<script type="text/javascript" src="PUBLIC/Js/jquery.min.js"></script>-->
<!--<script src="PUBLIC/Js/plugins/iCheck/icheck.min.js"></script>-->
<link href="PUBLIC/Css/Admin/Agent/addAgent.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="PUBLIC/Js/Webuploader/webuploader.js"></script>
<script type="text/javascript" src="PUBLIC/Js/sky/sky1.0.js"></script>
<script type="text/javascript" src="PUBLIC/Js/Admin/Agent/addAgent.js"></script>
  
 

外部页面的js代码

$.ajax({
    url: "getOssSign",
    context: document.body,
    data: {"param":'{"path":"51sc/img/life/product/"}'},
    type:"POST",
    success: function(result){
        setTimeout(function(){
            listPic = skyup({
//          "auto":false, //自动上传 默认true
                "multiple":true, //上传多个文件
                "selFileBtnId":"list_pic_picker",  //选择文件按钮的ID
                "host":result.data.host,  //选择文件按钮的ID
                "formData":result.data, //签名参数
                "uploadBtnId":"ctlBtn", //上传按钮
                "upFileContainer":"upimgspan", //单个文件展示容器类名
                "inputName":"list_pic[]", //上传表单name 用来自动生成隐藏表单
                "isAliOSS":true,  //阿里云OSS上传
                "pickLable":"上传图片",
                "liCallBack":liCallBack //上传图片回调函数
            });

//            detailPic = skyup({
////          "auto":false, //自动上传 默认true
//                "multiple":true, //上传多个文件
//                "selFileBtnId":"details_pic_picker",  //选择文件按钮的ID
//                "host":"http://img.365fenli.com/&quot;,&nbsp; //选择文件按钮的ID
//                "formData":result.getOssSignature.list, //签名参数
//                "uploadBtnId":"ctlBtn", //上传按钮
//                "inputName":"details_pic[]", //上传表单name 用来自动生成隐藏表单
//                "isAliOSS":true,  //阿里云OSS上传
//                "pickLable":"上传详情图"
//            });


        },500)


    },
    error:function(xhr){
        console.log("错误提示： " + xhr.status + " " + xhr.statusText);
    }
});


/**
 * 上传回调
 * @param file
 * @param config 配置信息
 * @param type  类型 1 为图片载入列队  2 为单个文件上传完成 3 为全部文件上传完成
 * @param response  单个文件 上传完成返回信息
 */
function liCallBack(file,config,type,response){
    if(type == 1){
        $("#thelist_"+config.thelist_name+" #"+config.selFileBtnId).before('<span id="' + file.id + '" class="'+config.upFileContainer+'"><span>'+ file.name +'<br>等待上传...</span><input type="hidden" name="'+config.inputName+'" ></span>');
    }else if(type == 2){
        if(config.isAliOSS){
            var filename = response.data.filename;
        }else{
            var filename = response.data.filename;
        }
        $("#"+file.file.id).children('span').html('<img src="'+filename+'" width="100" height="100">').next('input').val(filename);


    }else if(type == 3){
        //修正上传按钮位置
        if(($("#thelist_"+config.thelist_name+" > span").length-1)%4 == 0){
            $("#thelist_"+config.thelist_name+" #"+config.selFileBtnId).css('margin-left',100);
        }else{
            $("#thelist_"+config.thelist_name+" #"+config.selFileBtnId).css('margin-left',0);
        }
        //console.log('全部完成上传');
    }
}


$(function(){


        var check_json = {};
        check_json['form_id'] = "yx_form";
        check_json['rules'] = {
            title: {
                "required": !0
            }
        };
        check_json['messages'] = {
            title: {
                "required": "请输入代理商名称"
            }


        };


        check_form(check_json, 'do_add_agent');
})


function do_add_agent(){
    var check_bool = true;


    if($("[name=level]").val() == 2){


        if($("[name=parent_agent_id]").val()==0){
            //alert($("input[name=parent_agent_name]").focus());
            yx_ealert('请输入上级代理商');
            check_bool = false;


        }
    }else  if($('[name=province_id]').val() == -1){
        yx_ealert('请选择省');
        check_bool = false;
    }else if($('[name=city_id]').val() == -1){
        yx_ealert('请选择市');
        check_bool = false;
    }else if($('[name=county_id]').val() == -1){
        yx_ealert('请选择区（县）');
        check_bool = false;
    }


    if(!check_bool){
        yx_modal_normal();  //解禁模态框
        return;
    }


    yx_add_edit($Yx.operate_data.requestlink,sub_success,$("#yx_form").serialize());
}



 
特别需要注意的是不要二次引入jquery，否则表单验证插件会报错