layui使用button按钮 点击出现弹层 弹层中加载表单的实例


Posted in Javascript onSeptember 04, 2019

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按钮 点击出现弹层 弹层中加载表单的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
禁用Tab键JS代码兼容Firefox和IE
Apr 18 Javascript
javascript学习笔记(四)function函数部分
Sep 30 Javascript
Javascript基础教程之数据类型转换
Jan 18 Javascript
jQuery操作表单常用控件方法小结
Mar 23 Javascript
JavaScript实现信用卡校验方法
Apr 07 Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
Dec 11 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
详解ES6系列之私有变量的实现
Nov 21 Javascript
小程序wx.getUserProfile接口的具体使用
Jun 02 Javascript
微信小程序 自定义复选框实现代码实例
Sep 04 #Javascript
layui弹出框Tab选项卡的示例代码
Sep 04 #Javascript
在layui tab控件中载入外部html页面的方法
Sep 04 #Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
Sep 04 #Javascript
微信小程序按钮点击动画效果的实现
Sep 04 #Javascript
微信小程序实现点击卡片 翻转效果
Sep 04 #Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 #Javascript
You might like
一个用于MySQL的PHP XML类
2006/10/09 PHP
php之curl实现http与https请求的方法
2014/10/21 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
PHP处理postfix邮件内容的方法
2015/06/16 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
PHP内核学习教程之php opcode内核实现
2016/01/27 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
js 三级关联菜单效果实例
2013/08/13 Javascript
JS上传图片前实现图片预览效果的方法
2015/03/02 Javascript
jQuery读取XML文件内容的方法
2015/03/09 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
Python常用的日期时间处理方法示例
2015/02/08 Python
详解Django框架中用context来解析模板的方法
2015/07/20 Python
用python爬取租房网站信息的代码
2018/12/14 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
Python同时迭代多个序列的方法
2020/07/28 Python
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
英国现代、当代和设计师家具店:Furntastic
2020/07/18 全球购物
自我评价格式
2014/01/06 职场文书
公司会计岗位职责
2014/02/13 职场文书
党员政治学习材料
2014/05/14 职场文书
部门2015年度工作总结
2015/04/29 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
JavaScript 数组去重详解
2021/09/15 Javascript
springboot如何接收application/x-www-form-urlencoded类型的请求
2021/11/02 Java/Android