layui使用button按钮 点击出现弹层 弹层中加载表单的实例
作者:铁汉柔情li 时间:2024-05-02 17:22:15
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>
来源:https://blog.csdn.net/qq_37306041/article/details/80411389
标签:layui,button,弹层,表单
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
推荐五个常用的python图像处理库
2022-07-20 10:40:38
![](https://img.aspxhome.com/file/2023/9/131279_0s.png)
利用Vscode进行Python开发环境配置的步骤
2023-04-18 09:06:46
![](https://img.aspxhome.com/file/2023/3/123493_0s.jpg)
python插入排序算法的实现代码
2021-09-11 15:36:15
使用Python实现批量ping操作方法
2021-04-06 02:55:34
模糊查询
2024-01-21 09:23:30
Python中常见的导入方式总结
2023-03-04 18:22:03
ubuntu16.04在python3 下创建Django项目并运行的操作方法
2021-02-01 11:03:50
![](https://img.aspxhome.com/file/2023/5/130995_0s.png)
python数字类型和占位符详情
2022-10-03 06:36:32
asp删除mssql数据库中没有记录的图片代码
2011-03-11 11:22:00
解决mysql创建数据库后出现:Access denied for user 'root'@'%' to database 'xxx'的问题
2024-01-21 22:51:52
vue.js移动端app之上拉加载以及下拉刷新实战
2024-05-09 10:40:22
![](https://img.aspxhome.com/file/2023/0/126640_0s.gif)
PHP中类静态调用和范围解析操作符的区别解析
2023-11-15 07:38:39
Python数据处理pandas读写操作IO工具CSV解析
2021-11-18 23:31:33
![](https://img.aspxhome.com/file/2023/4/109844_0s.png)
快速查找Python安装路径方法
2023-02-24 00:11:23
![](https://img.aspxhome.com/file/2023/2/115652_0s.png)
Pytorch中.new()的作用详解
2023-12-11 10:28:54
使用Selenium实现微博爬虫(预登录、展开全文、翻页)
2022-07-09 11:00:18
![](https://img.aspxhome.com/file/2023/2/107562_0s.jpg)
高效率的GetRows()的使用方法
2008-09-23 18:29:00
![](https://img.aspxhome.com/file/UploadPic/20089/23/access-table_39s.jpg)
流动的线条 —— 中国汉字书法之美
2009-10-30 18:15:00
![](https://img.aspxhome.com/file/UploadPic/200910/30/1-79s.jpg)
浅谈Python中os模块及shutil模块的常规操作
2022-05-02 21:42:50
调试一段PHP程序时遇到的三个问题
2023-06-22 11:39:22