[부트스트랩5] 화면 중앙에 알림모달 띄우기
화면의 정 중앙에 알림 모달을 띄우는 방법입니다.
이부분은 아래 modal-dialog-centered 부분이 추가 되면 자동처리가 되면 화면 위쪽에 보여주고 싶으면 이 클래스명만 제외 시키면 됩니다.
<div class="modal-dialog modal-dialog-centered">
아래는 테스트 해볼 수 있는 소스 입니다.
그리고 중요 부분만 있지만 이건 BODY 안에 넣어 두기만 하면 되는것이라서 확인이 무척 간단 합니다.
mt-5 부분이 최상위 div에 있는데 상단 부분을 좀 떨어 트리는 부분인데 중앙 정렬에선 필요한 부분은 아닙니다. 중앙 정렬이 아닐때 상단에 너무 붙으면 이부분을 추가해주고 그리고 더 띄우고 싶으면 10rem; 정도 더 style에 넣어주며 되는데요. 반응형에선 항상 rem 사용하는것이 중요합니다. px 사용하시면 나중에 난감한 문제가 생길 수 있기 때문이죠.
<!-- 알림 모달 -->
<div class="modal fade mt-5" id="notificationModal" tabindex="-1" aria-labelledby="notificationModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="notificationModalLabel"><i class="fas fa-bell"></i> 알림</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="d-flex justify-content-end mb-2">
<button class="btn btn-sm btn-outline-secondary" data-action="read_all">
<i class="fas fa-envelope-open"></i> 모두 읽음
</button>
</div>
<div id="notificationList">
<!-- 알림 내용이 여기에 동적으로 추가될 수 있습니다 -->
<div class="alert alert-info">새로운 알림이 없습니다.</div>
</div>
</div>
</div>
</div>
</div>
<script>
function frm_search_submit() {
// return true;
}
// 이부분 잘 작동 되는것 확인 후 주석 처리함
// document.addEventListener('DOMContentLoaded', function() {
// var myModal = new bootstrap.Modal(document.getElementById('notificationModal'));
// myModal.show();
// });
// 배경클릭시 닫히지 않고 X 버튼 클릭시에만 닫히게 하는 방법
document.addEventListener('DOMContentLoaded', function() {
var myModal = new bootstrap.Modal(document.getElementById('notificationModal'), {
backdrop: 'static',
keyboard: false
});
myModal.show();
});
</script>
배경 부분만 클릭해도 닫히게 하고 싶은 경우는 위 주석 처리한 스크립트 부분을 이용하시면 됩니다. 그러면 X 버튼과 무관하게 알림이 없어집니다.