Layui 팝업 레이어 사용 방법

藏色散人
풀어 주다: 2023-01-13 00:40:15
원래의
4549명이 탐색했습니다.

layui 팝업 레이어 사용 방법: 먼저 jQuery 1.8 이상의 모든 버전을 도입한 다음 laery.js를 도입하고 마지막으로 "function show(){var a = layer.open({...})을 사용합니다. ;}" 메서드 laery.open을 사용하여 레이어를 팝업하면 됩니다.

Layui 팝업 레이어 사용 방법

이 튜토리얼의 운영 환경: Windows 7 시스템,layui2.4&&jquery2.2.1 버전, Dell G3 컴퓨터.

추천: "layUI Tutorial"

layer는layui 시스템에서 특별한 위치를 가지고 있어 많은 사람들이layui = 레이어 ui라고 잘못 생각하게 만들기 때문에 레이어는 단지layui의 스프링 레이어 모듈일 뿐이라는 점을 다시 강조합니다.

1. laery를 얻으려면 공식 웹사이트에 가서 laery.js 주소를 다운로드해야 합니다 - http://layer.layui.com/

2. 그 전에 먼저 laery.js를 가져와야 합니다. jQuery 1.8 이상 버전

<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="layer/layer.js"></script>
로그인 후 복사

3. laery.open();

function show(){
  var a = layer.open({
    type: 2,
    area: [&#39;80%&#39;,&#39;450px&#39;],
    title: &#39;我是标题&#39;,
    shadeClose: true,
    content: [&#39;layer_model.html&#39;,&#39;no&#39;]
  });
}
로그인 후 복사

기본 매개변수

1. 유형 유형

type: 1,  // 0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
로그인 후 복사

2. 제목 제목

title:"我是标题",  
//若你还需要自定义标题区域样式,那么你可以title: [&#39;文本&#39;, &#39;font-size:18px;&#39;] 数组第二项可以写任意css样式;
//如果你不想显示标题栏,你可以 title: false
로그인 후 복사

3.1. 페이지 레이어

layer.open({
  type: 1, 
  content: &#39;传入任意的文本或html&#39; //这里content是一个普通的String
});
 
layer.open({
  type: 1,
  content: $(&#39;#id&#39;) //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响
});
 
//Ajax获取
$.post(&#39;url&#39;, {}, function(str){
  layer.open({
    type: 1,
    content: str //注意,如果str是object,那么需要字符拼接。
  });
});
로그인 후 복사

예:

Layui 팝업 레이어 사용 방법3.2.iframe 레이어인 경우

layer.open({
  type: 2, 
  content: &#39;http://sentsin.com&#39; //这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content: [&#39;http://sentsin.com&#39;, &#39;no&#39;]
});
로그인 후 복사

예:

Layui 팝업 레이어 사용 방법3.3.tips 레이어를 실행하기 위해 layer.open을 사용하는 경우

layer.open({
  type: 4,
  content: [&#39;内容&#39;, &#39;#id&#39;] //数组第二项即吸附元素选择器或者DOM
});
로그인 후 복사

예:

Layui 팝업 레이어 사용 방법4. 영역 너비 및 높이

기본 상태에서는 레이어의 너비와 높이가 조정되지만 너비만 정의하려는 경우에는 Area: '500px'를 사용할 수 있으며 높이는 여전히 조정 가능합니다. . 너비와 높이를 모두 정의할 때 다음 영역을 지정할 수 있습니다: ['500px', '300px']

5.btn 버튼

정보 상자 모드에서 btn은 기본적으로 확인 버튼이며 다른 레이어 유형은 표시되지 않습니다. 기본값은 로딩 레이어와 팁 레이어가 유효하지 않습니다. 하나의 버튼만 사용자 정의하려면 btn: '알고 있습니다', 두 개의 버튼을 정의하려면 btn: ['yes', 'no']를 사용할 수 있습니다. 물론 다음과 같이 더 많은 버튼을 정의할 수도 있습니다. btn: ['Button 1', 'Button 2', 'Button 3', ...], 버튼 1의 콜백은 yes이고 버튼 2부터 시작합니다. 콜백은 btn2 : function(){} 등입니다. 예:

layer.open({
  content: &#39;test&#39;,
  btn: [&#39;按钮一&#39;, &#39;按钮二&#39;, &#39;按钮三&#39;],
  yes: function(index, layero){
    //按钮【按钮一】的回调
  },
  btn2: function(index, layero){
    //按钮【按钮二】的回调
    //return false 开启该代码可禁止点击该按钮关闭
  },
  btn3: function(index, layero){
    //按钮【按钮三】的回调
    //return false 开启该代码可禁止点击该按钮关闭
  },
  cancel: function(){ 
    //右上角关闭回调
    //return false 开启该代码可禁止点击该按钮关闭
  }
});
로그인 후 복사

6, 쉐이드 마스크

는 탄성층 외부 영역입니다. 기본값은 투명도 0.3('#000')의 검정색 배경입니다. 다른 색상을 정의하려면 다음과 같이 음영을 적용할 수 있습니다. 마스크를 표시하지 않으려면 다음을 수행합니다. 쉐이드: 0

마스크가 존재하는 경우, 마스크를 클릭하여 닫도록 쉐이드클로스를 설정할 수도 있습니다. 쉐이드가 존재하는 경우, 탄성 레이어 외부 영역 클릭을 제어하도록 쉐이드클로스를 설정할 수 있습니다. 닫으러

위 내용은 Layui 팝업 레이어 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!