layer.open增添模板效果母页面

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>随访信息</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="stylesheet" href="../css/base.css">
        <!--<link rel="stylesheet" href="../css/FollowUpPatientsAndInformation.css">-->
        <link rel="stylesheet" href="../css/bootstrap.min.css" />
        <!--<link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />-->
        <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="../css/btable.css" />
        <style>
            input{
                border:0px !important;
                border-bottom:1px solid #ccc !important;
                30%;            
                }
            .active{
                border-radius: 20px;
                display: inline-block;
                border: 1px solid #199ED8;
                 85px;
                text-align: center;
            }
            a{
                 text-decoration:none !important;
            }
        </style>
    </head>
    <body class="padd_40" style="background: #EBEBEB;padding-top: 35px">
        <ul class="">
            <li class="" id="" style="margin-bottom:20px">
                <!--患者信息-->
                <div style="90%;margin: 0 auto;">
                    <div style="float:left;49%;">
                        <span>患者:</span>
                        <span id="usrName"></span>
                        <span>
                            <span id="usrSex"></span>
                            <span>
                                <i style="font-style: normal;" id="usrAge"></i>
                                <b style="font-weight: normal;">岁</b>
                            </span>
                        </span>
                    </div>
                    <div style="float:right;49%;text-align: right;">
                        <button class="btn btn-info btn-xs seed">就诊记录</button>
                        <button class="btn btn-info btn-xs visit">随访记录</button>
                    </div>
                    <div style="clear: both;"></div>
                    <div style="margin-top: 20px;">
                        <ul>
                            <li>
                                <p>
                                    <span>随访内容:</span>
                                    <span id="followoption"></span>
                                </p>
                            </li>
                            <li>
                                <p>
                                    <span>诊断:</span>
                                    <span id="zdnam"></span>
                                </p>
                            </li>
                            <li>
                                <p>
                                    <span>科室:</span>
                                    <span id="deptnam"></span>
                                </p>
                            </li>
                            <li>
                                <p>
                                    <span>医生:</span>
                                    <span id="name"></span>
                                </p>
                            </li>
                        </ul>
                    </div>
                </div>
                
            </li>
            <!--体格坚持-->
            <li style="margin-bottom:20px">
                <div style="90%;margin: 0 auto;">
                    <span>体格检查</span>
                    <button class="btn btn-info btn-xs getdata">获取数据</button>
                </div>
                <div style="90%;margin: 0 auto;">
                    <div style="33.33%;float: left;"> 
                        <div class="tige-row">
                            <label style="margin-top: 24px; 37px">体温:</label>
                              <input type="text" id="TEMPERATURE"/>
                            <span>°C</span>
                        </div>
                    </div>
                    <div style="33.33%;float: left;">
                        <div class="tige-row">
                            <label style="margin-top: 24px; 37px">心率:</label>
                              <input type="text" id="HEARTRATE"/>
                            <span>次/分</span>
                        </div>
                    </div>
                    <div style="33.33%;float: left;">
                        <div class="tige-row">
                            <label style="margin-top: 24px; 37px">血压:</label>
                              <span style="30%;border-bottom:1px solid #ccc;">
                                  <input type="text" id="BLOODPRESSUREL" style=" 20%;"/>
                                  <i>/</i>
                                  <input type="text" id="BLOODPRESSUREH" style=" 20%;"/>
                              </span>
                            <span>mmHg</span>
                        </div>
                    </div>
                    <div style="clear: both;"></div>
                </div>
                    <div style="90%;margin: 0 auto;">
                    <div style="33.33%;float: left;"> 
                        <div class="tige-row">
                            <label style="margin-top: 24px; 37px">体重:</label>
                              <input type="text" id="WEIGHT"/>
                            <span>Kg</span>
                        </div>
                    </div>
                    <div style="33.33%;float: left;">
                        <div class="tige-row">
                            <label style="margin-top: 24px; 37px">血糖:</label>
                              <input type="text" id="FOLLOWSTATE"/>
                            <span>mmol/L</span>
                        </div>
                    </div>
                    <div style="33.33%;float: left;">
                        <div class="tige-row">
                            <label style="margin-top: 24px; 37px">血氧:</label>
                              <input type="text" id="BLOODOXYGEN"/>
                            <span>%</span>
                        </div>
                    </div>
                    <div style="clear: both;"></div>
                </div>
                <div style="clear: both;"></div>
            </li>
            <!--随访结论-->
            <li style="margin-bottom:20px">
                <div style="90%;margin: 0 auto;">
                    <div>随访结论
                       <span class="active"><a href="javascript:;" id="about">选择模板</a></span>
                    </div>
                    <textarea id="txt" maxlength="" name="textarea" cols="" rows="6" placeholder=" 请输入随访结论" style="color: #666;margin-top: 12px; 100%;height: 110px;"></textarea>
                </div>
            </li>
            
            <!--健康方案-->
            <li style="margin-bottom:20px">
                <div style="90%;margin: 0 auto;">
                    <div>健康方案
                       <span class="active"><a href="javascript:;" id="heal">选择模板</a></span>
                    </div>
                    <textarea id="txt2" maxlength="" name="textarea" cols="" rows="6" placeholder=" 请输入随访结论" style="color: #666;margin-top: 12px; 100%;height: 110px;"></textarea>
                </div>
            </li>
            
            <!--注意事项-->
            <li style="margin-bottom:20px">
                <div style="90%;margin: 0 auto;">
                    <div>注意事项
                       <span class="active"><a href="javascript:;" id="impot">选择模板</a></span>
                    </div>
                    <textarea id="txt3" maxlength="" name="textarea" cols="" rows="6" placeholder=" 请输入随访结论" style="color: #666;margin-top: 12px; 100%;height: 110px;"></textarea>
                </div>
            </li>
            
            <!--按钮-->
            <li style="margin-bottom:20px">
                <div style="90%;margin: 0 auto;">
                    <button class="btn btn-info btn-xs send"style="float:right;">保存并且发送</button>
                </div>
            </li>
        </ul>

        

        <script src="../js/jquery-1.7.2.min.js"></script>
        <script src="../js/FollowUpInformation.js"></script>
        <script src="../js/layer.js"></script>
        <script src="../js/layui.js"></script>
        <script src="../js/paging.js"></script>
        <script type="text/javascript">
             $('#about').on('click', function(){
                 
                layer.open({
                    type: 2,
                    title: '随访结论模板',
                    maxmin: true,
                    area: ['50%', '80%'],
                    id: 'LAY_layuipro', //设定一个id,防止重复弹出
                    shade: false,
                        shadeClose: false, //点击遮罩关闭
            
                        btn: ['确定','取消'],
                    content: 'alert.html',
                    yes: function(index) {
                      //赋值且触发关闭事件
                      var aler = localStorage.getItem("name1");
                      document.getElementById('txt').value = aler;
                      $('.layui-layer-btn1').click();//触发关闭事件
                    },
                });
            
            });
            
            $('#heal').on('click', function(){
                
                layer.open({
                    type: 2,
                    title: '健康方案模板',
                    maxmin: true,
                    id: 'LAY_layuipro', //设定一个id,防止重复弹出
                    area: ['50%', '80%'],
                    shade: false,
                        shadeClose: false, //点击遮罩关闭
            
                        btn: ['确定','取消'],
                    content: 'alert2.html',
                    yes: function(index) {
                        //赋值且触发关闭事件
                         var aler2 = localStorage.getItem("name2");
                      document.getElementById('txt2').value = aler2;
                      $('.layui-layer-btn1').click();//触发关闭事件
                    },
                });
            
            });
            
            $('#impot').on('click', function(){
                
                layer.open({
                    type: 2,
                    title: '注意事项模板',
                    maxmin: true,
                    id: 'LAY_layuipro', //设定一个id,防止重复弹出
                    area: ['50%', '80%'],
                    shade: false,
                        shadeClose: false, //点击遮罩关闭
            
                        btn: ['确定','取消'],
                    content: 'alert3.html',
                    yes: function(index) {
                       //赋值且触发关闭事件
                      var aler3 = localStorage.getItem("name3");
                      document.getElementById('txt3').value = aler3;
                      $('.layui-layer-close').click();//触发关闭事件
                    },
                });
            
            });
        </script>
    </body>

</html>
Json数据返回格式{
    "code": "000",
    "data": {
        "parameterType": [
            {
                "id": "451D34C65FDBC7FCE050007F01005BDA",
                "userid": "174BD3D5879C3BF0E050007F010077DC",
                "title": "注意事项模板",
                "content": "是知道消费观察观察发现GV",
                "type": "3",
                "state": "1",
                "createdate": "",
                "createname": "",
                "updatedate": "",
                "updatename": ""
            },
            {
                "id": "45278236d9f14d2697bea0a3b5d39b61",
                "userid": "174BD3D5879C3BF0E050007F010077DC",
                "title": "注意事项模板",
                "content": "uysdhbkjz摸啊速度很方便查看你都发扬光大",
                "type": "3",
                "state": "1",
                "createdate": "",
                "createname": "",
                "updatedate": "",
                "updatename": ""
            }
        ],
        "pageNo": 1,
        "totalPage": 1,
        "pageSize": 15,
        "totalRecord": 2
    },
    "message": "成功"
}
原文地址:https://www.cnblogs.com/hjptopshow/p/7809194.html