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

小編給大家分享一下layui如何使用button按鈕實現(xiàn)點擊出現(xiàn)彈層、彈層中加載表單，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

我們提供的服務(wù)有：網(wǎng)站建設(shè)、網(wǎng)站制作、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、詔安ssl等。為上千企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的詔安網(wǎng)站制作公司

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" >
   <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>

以上是“l(fā)ayui如何使用button按鈕實現(xiàn)點擊出現(xiàn)彈層、彈層中加載表單”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站標(biāo)題：layui如何使用button按鈕實現(xiàn)點擊出現(xiàn)彈層、彈層中加載表單
文章源于：http://bm7419.com/article20/igcico.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、商城網(wǎng)站、用戶體驗、品牌網(wǎng)站制作、動態(tài)網(wǎng)站、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)