easyui弹出层
1.效果图如下(该页面完成了数据添加,图片上传,图片数据回显功能,本篇文章主要介绍弹出操作):
2.点击“新增”按钮弹出添加信息的框,首先引入一套easyui和jquery
3.html代码:
<a href="#" class="easyui-linkbutton" plain="true" onclick="newAdd()" icon="icon-add">新增</a>
<div id="win" class="easyui-dialog" title="班级信息添加" style="width: 400px; padding: 10px 20px; height: 410px;"
closed="true" buttons="#dlg-buttons">
<form id="fm" method="post" action="" style="margin-top: 20px; margin-left: 20px;">
<div class="fitem">
<label>贷款人数:</label>
<input id="dkrs" style="" name="" class="easyui-textbox" />
</div>
<div class="fitem">
<label>班级名称:</label>
<input id="bjmc" name="" class="easyui-textbox" />
</div>
<div class="fitem">
<label>班级人数:</label>
<input id="bjrs" name="" class="easyui-textbox" />
</div>
<div class="fitem">
<label>老师名称:</label>
<input id="lsmc" name="" class="easyui-textbox" />
</div>
<div class="fitem">
<label>辅导员名称:</label>
<input id="fdymc" name="" class="easyui-textbox" />
</div>
<div class="fitem">
<label>辅导员编号:</label>
<input id="fdybh" name="" class="easyui-textbox" />
</div>
<div class="fitem">
<label>辅导员头像:</label>
<input type="file" name="file_upload2" id = "uplx" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="imgPreview(this)" >
</div>
<div id="Imgdiv" class="fitem">
<label></label>
<img id="preview" width="200px" height="200px" placeholder="预览"/>
</div>
<!--直接写提交取消的事件不需要在js中绑定-->
<div id="dlg-buttons" style="display: block">
<a id="confirm" href="javascript:void(0)" class="easyui-linkbutton c6" iconcls="icon-ok" onclick="Modify()" style="width: 90px">提交</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#win').dialog('close')" style="width: 90px">取消</a>
</div>
</form>
</div>
4.js代码:
function newAdd(){
$('#win').dialog('open');
}