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 动态改变图片大小
Jun 11 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
Aug 07 Javascript
javascript使用prototype完成单继承
Dec 24 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
深入浅出理解javaScript原型链
May 09 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
详解react-webpack2-热模块替换[HMR]
Aug 03 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 Javascript
JavaScript流程控制(循环)
Dec 06 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
php 获取远程网页内容的函数
2009/09/08 PHP
PHP中文件缓存转内存缓存的方法
2011/12/06 PHP
php比较多维数组中值的大小排序实现代码
2012/09/08 PHP
PHP实现微信公众平台音乐点播
2014/03/20 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
JS实现自定义简单网页软键盘效果代码
2015/11/05 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
2017/04/25 Javascript
Javascript通过控制类名更改样式
2019/05/24 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
vue2配置scss的方法步骤
2019/06/06 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
Python 函数基础知识汇总
2018/03/09 Python
Django高级编程之自定义Field实现多语言
2019/07/02 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
Python爬虫新手入门之初学lxml库
2020/12/20 Python
python自动生成证件号的方法示例
2021/01/14 Python
python 列表推导和生成器表达式的使用
2021/02/01 Python
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
暇步士官网:Hush Puppies
2016/09/22 全球购物
介绍一下Python中webbrowser的用法
2013/05/07 面试题
公司开会通知
2015/04/20 职场文书
2015年导购员工作总结
2015/04/25 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书