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 相关文章推荐
修改发贴的编辑功能
Mar 07 Javascript
javascript flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
复选框全选与全不选操作实现思路
Aug 18 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 Javascript
从0开始学Vue
Oct 27 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
Nov 03 Javascript
Bootstrap表单使用方法详解
Feb 17 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
react-router JS 控制路由跳转实例
Jun 15 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
微信小程序 自定义复选框实现代码实例
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
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
php之readdir函数用法实例
2014/11/13 PHP
php 指定范围内多个随机数代码实例
2016/07/18 PHP
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
JavaScript观察者模式(经典)
2015/12/09 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
原生JS实现的雪花飘落动画效果
2018/05/03 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
js实现点击烟花特效
2020/10/14 Javascript
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
在Python中使用Mako模版库的简单教程
2015/04/08 Python
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
详解Python装饰器由浅入深
2016/12/09 Python
Sanic框架安装与简单入门示例
2018/07/16 Python
python lxml中etree的简单应用
2019/05/10 Python
python脚本开机自启的实现方法
2019/06/28 Python
Python程序慢的重要原因
2020/09/04 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
美国美妆网站:B-Glowing
2016/10/12 全球购物
简历的个人自我评价范文
2014/01/03 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
2015年幼儿园元旦游艺活动策划书
2014/12/09 职场文书
法定代表人身份证明书
2015/06/18 职场文书
婚庆主持词大全
2015/06/30 职场文书
Python 数据科学 Matplotlib图库详解
2021/07/07 Python
css3应用示例:新增的选择器
2022/03/16 HTML / CSS