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種層類型?？蓚魅氲闹涤校?（信息框，默認(rèn)）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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript仿flash遮罩動畫效果
這篇文章主要為大家詳細介紹了JavaScript仿flash遮罩動畫效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-06-06
JavaScript實現(xiàn)url地址自動檢測并添加URL鏈接示例代碼
寫一個簡單的聊天系統(tǒng)，發(fā)出Htpp的Url實現(xiàn)跳轉(zhuǎn)加上a標(biāo)簽，下面是具體的實現(xiàn)，感興趣的朋友不要錯過
2013-11-11
JavaScript將base64圖片轉(zhuǎn)換成formData并通過AJAX提交的實現(xiàn)方法
本文通過三步驟給大家詳細介紹了JavaScript將base64圖片轉(zhuǎn)換成formData并通過AJAX提交的實現(xiàn)方法，感興趣的朋友一起看看吧
2016-10-10
JS獲取字符串型數(shù)組下標(biāo)的數(shù)組長度的代碼
JS獲取字符串型數(shù)組下標(biāo)的數(shù)組長度的代碼，需要的朋友可以參考下
2013-03-03
JavaScript中重名的函數(shù)與對象示例詳析
最近同事問了一個問題，說在js中如果函數(shù)與對象重名了會怎么樣？仔細詳細這個問題值得討論一下，所以便有了這篇文章，這篇文章主要給大家介紹了關(guān)于JavaScript中重名的函數(shù)與對象的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧啊。
2017-09-09
JavaScript避免代碼的重復(fù)執(zhí)行經(jīng)驗技巧分享
經(jīng)常會發(fā)現(xiàn)一個問題，那就是重復(fù)的代碼執(zhí)行，下面就是一些在查看它們的源代碼時發(fā)現(xiàn)一些問題，把這些分享給大家，希望能讓你們更加簡潔高效的寫出JavaScript代碼
2014-04-04
es7中的async、await使用方法示例詳解
async、await是es7里面的新語法，async申明一個function是異步，而await等待一個異步方法執(zhí)行完成。替代promise中的then。async函數(shù)返回一個Promise對象，當(dāng)函數(shù)執(zhí)行的時候，一旦遇到await就會先返回，等到觸發(fā)的異步操作完成，再接著執(zhí)行函數(shù)體內(nèi)后面的語句。
2023-01-01
IE的有條件注釋判定IE版本詳解（附實例代碼）
IE的有條件注釋是一種專有的（因此是非標(biāo)準(zhǔn)的）、對常規(guī)（X）HTML注釋的Miscrosoft擴展。顧名思義，有條件注釋使你能夠根據(jù)條件（比如瀏覽器版本）顯示代碼塊(不一定就是css，也可以是html代碼，甚至是JavaScript代碼)。
2012-01-01
require.js的用法詳解
本文給大家介紹require.js的用法，require.js的誕生是為了解決兩大問題，第一實現(xiàn)js文件的異步加載，避免網(wǎng)頁失去響應(yīng)，第二管理模塊之間的依賴性，便于代碼的編寫和維護，對require.js用法感興趣的朋友可以參考下本篇文章
2015-10-10
javascript 原型鏈維護和繼承詳解
本文通過實例詳細向我們分析了javascript原型鏈維護和繼承的問題，十分的詳盡，十分的全面，這里推薦給大家。
2014-11-11