大家好，又见面了，我是你们的朋友全栈君。
弹出层表单很常见,也很实用,无论是在pc端网页还是在移动端.
现在用layui来实现一下这个表单吧.
html
<form class="layui-form" id="test" style="display:none">
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="on" class="layui-input" id="username" style="width:100px">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码框</label>
<div class="layui-input-inline">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="on" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">辅助文字</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">选择框</label>
<div class="layui-input-block">
<select name="quiz" lay-search>
<option value="">请选择</option>
<optgroup label="城市记忆">
<option value="你工作的第一个城市">你工作的第一个城市？</option>
</optgroup>
<optgroup label="学生时代">
<option value="你的工号">你的工号？</option>
<option value="你最喜欢的老师">你最喜欢的老师？</option>
</optgroup>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" title="写作" lay-skin="primary">
<input type="checkbox" name="like[read]" title="阅读" checked lay-skin="primary">
<input type="checkbox" name="like[dai]" title="发呆" lay-skin="primary">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<input type="checkbox" name="switch" lay-skin="switch" lay-text="开启|关闭">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男">
<input type="radio" name="sex" value="女" title="女" checked>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label" >文本域</label>
<div class="layui-input-block">
<textarea lay-verify="required" name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
</form>
<button id="div">提交</button>
js
layer.open({
type:1,
area:['500px','600px'],
title: 'tianxie'
,content: $("#test"),
shade: 0,
btn: ['提交', '重置']
,btn1: function(index, layero){
var kk=$("#username").val();
alert(kk);
},
btn2: function(index, layero){
alert("2222");
return false;
},
cancel: function(layero,index){
layer.closeAll();
}
});
效果图
**欢迎光临本人咸鱼店铺
最新VUE3.0+TS入门与实战，打造企业级组件，打造知乎专栏等
最新React17+TS+全面拥抱HOOK打造企业级旅游系统等
最新畅销大前端金职位教学视频等
尽在大前端&Vue3&React
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/130128.html原文链接：https://javaforall.net
