Layui 팝업 레이어 사용 방법

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

이 튜토리얼의 운영 환경: 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: ['80%','450px'],
    title: '我是标题',
    shadeClose: true,
    content: ['layer_model.html','no']
  });
}

기본 매개변수

1. 유형 유형

type: 1,  // 0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）

2. 제목 제목

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

3.1. 페이지 레이어

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

예:

3.2.iframe 레이어인 경우

layer.open({
  type: 2, 
  content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
});

예:

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

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

예:

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: 'test',
  btn: ['按钮一', '按钮二', '按钮三'],
  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 중국어 웹사이트의 기타 관련 기사를 참조하세요!