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 相关文章推荐
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
Feb 13 Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 Javascript
Bootstrap每天必学之表单
Nov 23 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
实现JavaScript的组成----BOM和DOM详解
May 18 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
详细分析JS函数去抖和节流
Dec 05 Javascript
解决layui中的form表单与button的点击事件冲突问题
Aug 15 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
Apr 24 Javascript
JavaScript this关键字指向常用情况解析
Sep 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
提高PHP编程效率的53个要点(经验小结)
2010/09/04 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
2016/05/12 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
Windows下Eclipse+PyDev配置Python+PyQt4开发环境
2016/05/17 Python
Python协程的用法和例子详解
2017/09/09 Python
python matplotlib画图实例代码分享
2017/12/27 Python
Python 使用with上下文实现计时功能
2018/03/09 Python
Python异常的检测和处理方法
2018/10/26 Python
Python使用folium excel绘制point
2019/01/03 Python
深入理解Django-Signals信号量
2019/02/19 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
Python通过2种方法输出带颜色字体
2020/03/02 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
Python基于xlutils修改表格内容过程解析
2020/07/28 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
先进事迹报告会感言
2014/01/24 职场文书
大宝sod蜜广告词
2014/03/21 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
事业单位年度考核评语
2014/12/31 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
理解python中装饰器的作用
2021/07/21 Python
SQL实现LeetCode(180.连续的数字)
2021/08/04 MySQL