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 相关文章推荐
JavaScript/jQuery 表单美化插件小结
Feb 14 Javascript
js特效,页面下雪的小例子
Jun 17 Javascript
js function定义函数的几种不错方法
Feb 27 Javascript
JavaScript表单通过正则表达式验证电话号码
Mar 14 Javascript
如何使用jquery easyui创建标签组件
Nov 18 Javascript
Jqgrid之强大的表格插件应用
Dec 02 Javascript
AngularJS 日期格式化详解
Dec 23 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
webpack中如何加载静态文件的方法步骤
May 18 Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 Javascript
vue路由拦截器和请求拦截器知识点总结
Nov 08 Javascript
JavaScript实现点击图片换背景
Nov 20 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
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
PHP钩子实现方法解析
2019/05/21 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
jQuery第三课 修改元素属性及内容的代码
2010/03/14 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
js动态修改input输入框的type属性(实现方法解析)
2013/11/13 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
2016/12/18 Javascript
javascript和php使用ajax通信传递JSON的实例
2018/08/21 Javascript
python中format()函数的简单使用教程
2018/03/14 Python
Python2实现的图片文本识别功能详解
2018/07/11 Python
Python爬虫之正则表达式的使用教程详解
2018/10/25 Python
python实现图片九宫格分割
2021/03/07 Python
Django REST framework内置路由用法
2019/07/26 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
python程序输出无内容的解决方式
2020/04/09 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
利用Python实现字幕挂载(把字幕文件与视频合并)思路详解
2020/10/21 Python
Max&Co官网:意大利年轻女性时尚品牌
2017/05/16 全球购物
倩碧香港官方网站:Clinique香港
2017/11/13 全球购物
简述DNS进行域名解析的过程
2013/12/02 面试题
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
外语专业毕业生自我评价分享
2013/10/05 职场文书
单位成立周年感言
2014/01/26 职场文书
交通事故赔偿协议书
2014/04/15 职场文书
行政撤诉申请书
2015/05/18 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫