layui에서 팝업 상자 크기를 조정하는 방법: 먼저 새 HTML 코드 페이지를 만든 다음 링크를 사용하여 외부 스타일 layer.css 파일을 연결한 다음 마지막으로 "area: ["layer.opren()" 메서드의 ]" 팝업 상자의 크기만 설정하면 됩니다.
권장: "layUI Tutorial"
프런트 엔드 개발 도구를 열고 새 HTML 코드 페이지를 만듭니다
페이지에서
이 태그 뒤에 링크 외부 스타일 layer.css 파일<p><img src="https://img.php.cn/upload/image/164/916/295/1605666728677014.png" title="1605666728677014.png" alt="Layui에서 팝업 상자 크기를 조정하는 방법"></p>
<p>두 개의 외부 jquery.js 및 layer.js 파일을 링크된 layer.css 파일</p>
<p><img src="https://img.php.cn/upload/image/472/282/979/1605666732908481.png" title="1605666732908481.png" alt="Layui에서 팝업 상자 크기를 조정하는 방법"></p>
<p> 뒤에 삽입하여 팝업 상자를 만듭니다. 새로운 <script> 태그를 생성한 다음 이 태그에 layer.open()을 사용하여 팝업 상자 기능을 생성합니다. </script></p>
<p>팝업 상자 코드 생성: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">layer.open({
type: 2,
content: "test.html"
})</pre><div class="contentsignin">로그인 후 복사</div></div><p><img src="https://img.php.cn/upload/image/796/844/341/1605666742814047.png" title="1605666742814047.png" alt="Layui에서 팝업 상자 크기를 조정하는 방법"/></p><p>팝업 상자 효과를 확인하세요. html코드 파일을 저장한 후 브라우저로 열어보면 팝업박스 기능이 구현된 것을 확인할 수 있습니다</p><p><img src="https://img.php.cn/upload/image/939/620/517/1605666746963699.png" title="1605666746963699.png" alt="Layui에서 팝업 상자 크기를 조정하는 방법"/></p><p>팝업박스의 크기를 수정해보세요. 팝업 상자의 너비/높이를 설정하려면 layer.opren() 메서드에서 Area:[]를 사용하세요. </p><p>코드: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">layer.open({
type: 2,
area:["500px","400px"],
content: "test.html"
})</pre><div class="contentsignin">로그인 후 복사</div></div><p><img src="https://img.php.cn/upload/image/690/136/401/1605666754469863.png" title="1605666754469863.png" alt="Layui에서 팝업 상자 크기를 조정하는 방법"></p>
<p>html 코드를 저장하고 브라우저 페이지를 새로고침하면 팝업 상자의 크기가 변경된 것을 확인할 수 있습니다</p>
<p><img src="https://img.php.cn/upload/image/130/946/236/1605666758532235.png" title="1605666758532235.png" alt="Layui에서 팝업 상자 크기를 조정하는 방법"></p>
위 내용은 Layui에서 팝업 상자 크기를 조정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
