相思资源网 Design By www.200059.com
1.html代码片段
<div class="layui-input-inline">
<button type="button" οnclick="selectRole()" class="layui-btn layui-btn-primary layui-btn-radius">选择角色</button>
</div>
注意:必须添加
type="button"属性否则将会有问题
2.onclick函数
//选择角色弹层
function selectRole(){
layer.open({
//layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
type:1,
title:"查找用户角色",
area: ['50%','50%'],
content:$("#popSearchRoleTest").html()
});
}
3.弹出层内容
<!-- 选择角色的按钮 -->
<div class="layui-row" id="popSearchRoleTest" style="display:none;">
<div class="layui-col-md11">
<form class="layui-form" lay-filter="formTestFilter2121" >
<div class="layui-form-item">
<label class="layui-form-label">用户名:</label>
<div class="layui-input-inline">
<input type="text" name="userName" class="layui-input">
</div>
<label class="layui-form-label">密码:</label>
<div class="layui-input-inline">
<input type="text" name="password" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">角色:</label>
<div class="layui-input-inline">
<input type="text" name="roleName" class="layui-input">
</div>
<div class="layui-input-inline">
<button οnclick="selectRole()" class="layui-btn layui-btn-primary layui-btn-radius">选择角色</button>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">备注:</label>
<div class="layui-input-block">
<textarea placeholder="请输入内容" class="layui-textarea" name="userDescription"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="button" class="layui-btn layui-btn-normal">提交</button>
</div>
</div>
</form>
</div>
</div>
以上这篇layui使用button按钮 点击出现弹层 弹层中加载表单的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com
暂无layui使用button按钮 点击出现弹层 弹层中加载表单的实例的评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。