由于使用的是layui,所以用法如下
html代码:
<div class="layui-btn layui-btn-sm layui-btn-success btnYuyue" data-seenum="{$vo.see_num}" data-fee="{$vo.doctor_price}" data-time="{$vo.start_time}-{$vo.end_time}" data-id="{$vo.time_id}">预约</div>
<script type="text/html" id="modelUser">
<form id="modelYueForm" lay-filter="modelYueForm" class="layui-form model-form" style="padding:30px;">
<div class="layui-form-item">
<label class="layui-form-label">就诊号:</label>
<div class="layui-input-block">
<input name="the_num" id="the_num" type="text" class="layui-input" maxlength="20"
lay-verType="tips" lay-verify="required" required/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">挂号费:</label>
<div class="layui-input-block">
<input name="the_fee" id="the_fee" type="text" class="layui-input" maxlength="20"
lay-verType="tips" lay-verify="required" required/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">挂号时间:</label>
<div class="layui-input-block">
<input name="the_time" id="the_time" type="text" class="layui-input" maxlength="20"
lay-verType="tips" lay-verify="required" required/>
</div>
</div>
<input type="hidden" name="time_id" id="time_id" value=""/>
<div class="layui-form-item text-right" style="margin-left:300px;">
<button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
<button class="layui-btn" lay-filter="modelYueForm" lay-submit>保存</button>
</div>
</form>
</script>
js代码如下
layui.use(['layer', 'form'], function () {
var layer = layui.layer;
var form = layui.form;
// 显示表单弹窗
$('.btnYuyue').click(function (e) {
//console.log(e.currentTarget.dataset.seenum);
showEditModel();
// $('#the_num').attr('value',e.currentTarget.dataset.seenum);
$('#the_num').val(e.currentTarget.dataset.seenum);
$('#the_time').val(e.currentTarget.dataset.time);
$('#the_fee').val(e.currentTarget.dataset.fee);
$('#time_id').val(e.currentTarget.dataset.id);
});
// 显示表单弹窗
function showEditModel() {
layer.open({
type: 1,
title: '系统公告' + '<span style="float: right;right: 1px;font-size: 12px;color: #b1b3b9;margin-top: 1px"></span>',
area: '1200px',
shade: 0.8,
id: 'layuimini-notice',
//btn: ['查看', '取消'], //原版显示按钮
btnAlign: 'c',
moveType: 1,
content: $('#modelUser').html(),
success: function (layero) {
// var btn = layero.find('.layui-layer-btn'); 原版显示按钮
// btn.find('.layui-layer-btn0').attr({
// href: 'https://gitee.com/zhongshaofa/layuimini',
// target: '_blank'
// });
// 表单提交事件
form.on('submit(modelYueForm)', function (data) {
//layer.load(2);
var url="yuyue";
$.post(url, data.field, function (res) {
layer.closeAll('loading');
if (res.code == 200) {
layer.close(dIndex);
layer.msg(res.msg, {icon: 1});
insTb.reload();
} else {
layer.msg(res.msg, {icon: 2});
}
}, 'json');
return false;
});
}
});
}
});