快捷導(dǎo)航

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

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

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

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"屬性否則將會(huì)有問題

2.onclick函數(shù)

//選擇角色彈層
 function selectRole(){
 layer.open({
     //layer提供了5種層類型?？蓚魅氲闹涤校?（信息框，默認(rèn)）1（頁(yè)面層）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="請(qǐng)輸入內(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按鈕點(diǎn)擊出現(xiàn)彈層彈層中加載表單的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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