layui 최적화 button 단추 와 팝 업 상자 방법

2469 단어 layuibutton팝 업 프레임
정상 적 인 layui 는 3 개의 button 단추 에 있 습 니 다.

압축 후

코드

<button data-id="{$activity.activity_id}" style="background-color:#297911;" class="layui-btn layui-btn-small layui-btn-danger edit_store">    </button>
<button data-id="{$activity.activity_id}" class="layui-btn layui-btn-small layui-btn-danger del-activity">    </button>
<button data-id="{$activity.activity_id}" class="layui-btn layui-btn-small layui-btn-normal switch-activity">    </button>
<button data-id="{$activity.activity_id}" class="layui-btn layui-btn-small layui-btn-normal switch-activity">    </button>
최적화:모든 button 에 상공 추가

<a><button data-id="{$activity.activity_id}" style="background-color:#297911;" class="layui-btn layui-btn-small layui-btn-danger edit_store">    </button><a>
효과

'클릭 하여 보기'를 누 르 면 팝 업 상자 정보 가 나타 납 니 다.

html

<td class='mouse-over-out' data-content="    ：{$activity.store_count}  <hr>     ：{$activity.activity_theme} <hr>   ID：{$activity.wechat_card_id} <hr>"><a style="color:red;" href="#" rel="external nofollow" >    </a></td>
js

 //      
  $('.mouse-over-out').click(function(){
   layer.open({
    title: '    ',
    type: 1,
    skin: 'layui-layer-demo', //    
    closeBtn: 0, //       
    anim: 2, //     
    shadeClose: true, //      
    area: ['20%', '30%'],
    content:"<div style='height:90%;width:90%;margin:0 auto;margin-top:5%;'><p style='line-height:1%;'>"+
    $(this).data('content')+
    "<p/></div>"
   });
  });
이상 의 layui 최적화 button 단추 와 팝 업 상 자 를 만 드 는 방법 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 실 수 있 고 많은 응원 부 탁 드 리 겠 습 니 다.
layui 단 추 를 누 르 면 편집 가능 한 줄 을 추가 합 니 다.
jQuery 매개 변수 사용자 정의 문자 주마등 효과 구현

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage