728x90
모달(modal) 사용하기
1. html
<title>Modal Example</title>
<!-- jquery -->
<script src="//code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- 부트스트랩 -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
<!-- <script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
<!-- 내 css -->
<link rel="stylesheet" href="/css/modalEX.css">
</head>
<body>
<button id="btn-modal">모달 test</button>
<div id="modal" class="modal-overlay">
<div class="modal-window">
<div class="title">
<h2>모달타이틀</h2>
</div>
<div class="close-area">X</div>
<div class="content">
모달에 넣을 내용
</div>
</div>
</div>
<!-- 내 js -->
<script type="text/javascript" src="/js/modalEX.js"></script>
</body>원래 주석처리한 부트스트랩을 사용했는데 새 프로젝트 만들어서 테스트할 때는 잘 작동이 되었는데 작업하던 곳에 모달을 추가했더니 자꾸 css가 아예 먹지 않거나 모달창이 안 먹혀서 부득이하게 부트스트랩 js만 따로 사용하게 되었다..
button의 id와 모달의 가장 큰 div의 id는 같아야 한다.
2. CSS
더보기
.modal-overlay {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(10, 20, 40, 0.25);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(1.5px);
-webkit-backdrop-filter: blur(1.5px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
}
.modal-window {
background: rgba(9, 20, 40, 0.9);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.22);
backdrop-filter: blur(13.5px);
-webkit-backdrop-filter: blur(13.5px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
width: 680px;
height: 500px;
position: relative;
top: -100px;
padding: 10px;
}
.title {
padding-left: 10px;
display: inline;
text-shadow: 1px 1px 2px gray;
color: #C8AA6E;
}
.title h2 {
display: inline;
}
.close-area {
display: inline;
float: right;
padding-right: 10px;
cursor: pointer;
text-shadow: 1px 1px 2px gray;
color: #C89B3C;
}
.content {
margin-top: 20px;
padding: 0px 10px;
text-shadow: 1px 1px 2px gray;
color: white;
text-align: left;
}
.contents{
width : 300px;
height : 200px;
border: 1px solid black;
}
.btn-group button{
padding: 5px;
margin-top: 10px;
margin-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
}
.btn-group #duoBtn{
margin-right: -4px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.btn-group #mentoBtn{
margin-left: -4px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.btn-group #discodeOn{
margin-right: -4px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.btn-group #discodeOff{
margin-left: -4px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.btn-group .selectBtn{
border: 1px solid #091428;
background-color: #C89B3C;
color: #1E282D;
}
.btn-group .noSelectBtn{
border: 1px solid #C89B3C;
background-color: #091428;
color: #C89B3C;
}길어서 더보기 안에 넣어두었다.
3. js
/* ========== 모달창 열기 ========== */
const modal = document.getElementById('modal')
const btn_modal = document.getElementById('btn-modal')
btn_modal.addEventListener('click', e => {
modal.style.display = 'flex'
})
/* ========== 모달창 닫기 ========== */
const closeBtn = modal.querySelector('.close-area')
closeBtn.addEventListener('click', e => {
modal.style.display = 'none'
})
/* 외부영역으로 닫기 */
$(document).mouseup(function (e){
if($('#modal').has(e.target).length === 0){ $('#modal').hide(); }
});
/* ESC로 닫기 */
$(document).keydown(function(e){
var code = e.keyCode || e.which;
if (code == 27) {
$('#modal').hide();
}
});외부영역 클릭이나 ESC로 닫는 방법은 블로그(링크)를 통해 알게 되었다.
728x90
'프로그래밍 > 저장' 카테고리의 다른 글
| sts4) 페이징 (0) | 2024.02.19 |
|---|---|
| Post로 사용하여 값 전송하기 (0) | 2024.02.06 |
| STS4) 타임리프 편하게 사용하기 (0) | 2024.02.02 |
| 타임리프 반복문 th:each (0) | 2024.02.02 |