728x90
300x250
SMALL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layer Popup with Nice-Select</title>
<!-- jQuery 및 nice-select의 CDN을 이용한 스타일 및 스크립트 연결 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/css/nice-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 반투명한 검은색 배경 */
display: none;
}
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
display: none;
}
.close {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
cursor: pointer;
}
/* nice-select 스타일을 위한 추가 스타일 */
.nice-select {
width: 300px;
}
.nice-select .list {
width: 100%;
}
</style>
</head>
<body>
<div class="wrap">
<!-- nice-select 적용된 셀렉트 박스 -->
<select id="selectBox" class="nice-select">
<option value="option1">옵션 1</option>
<option value="option2">옵션 2</option>
<option value="option3">옵션 3</option>
</select>
</div>
<script>
// nice-select 초기화
$(document).ready(function() {
$('#selectBox').niceSelect();
});
</script>
</body>
</html>
jQuery nice-select 다운로드 주소
https://jqueryniceselect.hernansartorio.com/
jQuery Nice Select
Usage 1. Include jQuery and the plugin. 2. Include the plugin styles, either the compiled CSS... ...or, ideally, import the SASS source (if you use SASS) in your main stylesheet for easier customization. @import 'nice-select'; // Or 'nice-select-prefixed'.
jqueryniceselect.hernansartorio.com
728x90
반응형
LIST
'javaScript > jQuery' 카테고리의 다른 글
| $() 직접 호출 방식이 왜 문제인가? (0) | 2025.04.23 |
|---|---|
| 심플 갤러리 부드럽게 정렬하기 - 비공개 (0) | 2024.01.11 |
| 부드럽게 이동하기 jQuery (0) | 2024.01.09 |
| html 특정 태그 안의 텍스트만을 가져오고 싶을때 (0) | 2023.12.13 |
| detach() 메서드 (0) | 2023.11.12 |
댓글