快捷導航

layui使用button按鈕點擊出現(xiàn)彈層彈層中加載表單的實例

更新時間：2019年09月04日 11:28:34 作者：鐵漢柔情li

今天小編就為大家分享一篇layui使用button按鈕點擊出現(xiàn)彈層彈層中加載表單的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

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函數(shù)

//選擇角色彈層
 function selectRole(){
 layer.open({
     //layer提供了5種層類型?？蓚魅氲闹涤校?（信息框，默認）1（頁面層）2（iframe層）3（加載層）4（tips層）
      type:1,
      title:"查找用戶角色",
      area: ['50%','50%'],
      content:$("#popSearchRoleTest").html()
    });
 }

3.彈出層內(nèi)容

<!-- 選擇角色的按鈕 -->
 <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="請輸入內(nèi)容" 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按鈕點擊出現(xiàn)彈層彈層中加載表單的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: