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

 更新时间:2019年09月04日 11:28:34   作者:铁汉柔情li  
今天小编就为大家分享一篇layui使用button按钮 点击出现弹层 弹层中加载表单的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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仿flash遮罩动画效果

    JavaScript仿flash遮罩动画效果

    这篇文章主要为大家详细介绍了JavaScript仿flash遮罩动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • JavaScript实现url地址自动检测并添加URL链接示例代码

    JavaScript实现url地址自动检测并添加URL链接示例代码

    写一个简单的聊天系统,发出Htpp的Url实现跳转加上a标签,下面是具体的实现,感兴趣的朋友不要错过
    2013-11-11
  • JavaScript将base64图片转换成formData并通过AJAX提交的实现方法

    JavaScript将base64图片转换成formData并通过AJAX提交的实现方法

    本文通过三步骤给大家详细介绍了JavaScript将base64图片转换成formData并通过AJAX提交的实现方法,感兴趣的朋友一起看看吧
    2016-10-10
  • JS获取字符串型数组下标的数组长度的代码

    JS获取字符串型数组下标的数组长度的代码

    JS获取字符串型数组下标的数组长度的代码,需要的朋友可以参考下
    2013-03-03
  • JavaScript中重名的函数与对象示例详析

    JavaScript中重名的函数与对象示例详析

    最近同事问了一个问题,说在js中如果函数与对象重名了会怎么样?仔细详细这个问题值得讨论一下,所以便有了这篇文章,这篇文章主要给大家介绍了关于JavaScript中重名的函数与对象的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧啊。
    2017-09-09
  • JavaScript避免代码的重复执行经验技巧分享

    JavaScript避免代码的重复执行经验技巧分享

    经常会发现一个问题,那就是重复的代码执行,下面就是一些在查看它们的源代码时发现一些问题,把这些分享给大家,希望能让你们更加简洁高效的写出JavaScript代码
    2014-04-04
  • es7中的async、await使用方法示例详解

    es7中的async、await使用方法示例详解

    async、await是es7里面的新语法,async申明一个function是异步,而await等待一个异步方法执行完成。替代promise中的then。async函数返回一个Promise对象,当函数执行的时候,一旦遇到await就会先返回,等到触发的异步操作完成,再接着执行函数体内后面的语句。
    2023-01-01
  • IE的有条件注释判定IE版本详解(附实例代码)

    IE的有条件注释判定IE版本详解(附实例代码)

    IE的有条件注释是一种专有的(因此是非标准的)、对常规(X)HTML注释的Miscrosoft扩展。顾名思义,有条件注释使你能够根据条件(比如浏览器版本)显示代码块(不一定就是css,也可以是html代码,甚至是JavaScript代码)。
    2012-01-01
  • require.js的用法详解

    require.js的用法详解

    本文给大家介绍require.js的用法,require.js的诞生是为了解决两大问题,第一实现js文件的异步加载,避免网页失去响应,第二管理模块之间的依赖性,便于代码的编写和维护,对require.js用法感兴趣的朋友可以参考下本篇文章
    2015-10-10
  • javascript 原型链维护和继承详解

    javascript 原型链维护和继承详解

    本文通过实例详细向我们分析了javascript原型链维护和继承的问题,十分的详尽,十分的全面,这里推荐给大家。
    2014-11-11

最新评论