[부트스트랩5] 화면 중앙에 알림모달 띄우기 > CSS
CSS

[부트스트랩5] 화면 중앙에 알림모달 띄우기

조회 209회 댓글 0건

화면의 정 중앙에 알림 모달을 띄우는 방법입니다.

이부분은 아래 modal-dialog-centered 부분이 추가 되면 자동처리가 되면 화면 위쪽에 보여주고 싶으면 이 클래스명만 제외 시키면 됩니다.

<div class="modal-dialog modal-dialog-centered">


[부트스트랩5] 화면 중앙에 알림모달 띄우기
 

아래는 테스트 해볼 수 있는 소스 입니다.

그리고 중요 부분만 있지만 이건 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 버튼과 무관하게 알림이 없어집니다.




  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
전체 17건 1 페이지
  • profile_image 정렬에 관한 부분 많이 사용할 부분에 테스트 한것입니다.부트스트랩5 용량 크다고 뭐라 하시는분도 있던데 제가 보기엔 일반 사이트 이정도면 큰것 절대 아닙니다.다른것 많이 사용하지 않고 부트스트랩5 위줄 잘 사용하면 충분이 예쁘고 반응형인 사이트 만드는데 충분 합니다.위 페이지의 결과에 대한 부트스트랩5 코드는 아래와 같습니다. <!DOCTYPE html> <html lang="ko"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0…
  • profile_image 부트스트랩이 반응형 이기 때문에 자동으로 처리가 되는 부분이 있습니다.여기선 이부분에서 나와야 되는 순서 문제로 조정한 부분에 대한 것으로 아래 이미지를 보시면 쉽게 이해가는 부분입니다. 아래는 부트스트랩5 테스트 한 소스 입니다.중요한 부분만 올립니다. 이정도면 사실상 다 올린것과 다름이 없는 부분입니다.<head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>PABBURI Bootstrap 5 Layout</title&…
  • profile_image 뚱뚱하게 나온다고 자르면 더 보기가 좋지 않다. 입이나 코가 잘리는 경우 그렇다. 뚱뚱하게 나오면 보기가 좋지 않고 그래서 비율에 맞게 처리해 주는 방법이 제일 좋은데 아래 방법을 사용 하면 된다. 알아보기 쉽게 인라인으로 작성함. 이미지 주변에 옅은 테두리를 추가하고 이미지가 짤리지 않도록 조정하기 위해서 먼저 이미지를 감싸는 div 태그에 테두리(border)를 추가하고 이미지의 object-fit 속성을 contain으로 변경하여 이미지가 전체적으로 보이도록 조정할 수 있습니다. 이미지의 가로 세로 비율을 유지하면서 너비는 100%로 설정하여 부모 요소의 너비에 맞추고 높이는 원하는 값으로 고정합니다. 이렇게 하면…
  • profile_image 글자가 많을 경우 밀리지 않고 뒤쪽이 보이지 않게 처리하려면 텍스트가 넘치는 부분을 숨기는 CSS 속성인 overflow를 사용할 수 있습니다. 여기에 text-overflow 속성을 추가하여 넘치는 텍스트를 어떻게 처리할지 결정할 수 있으며 white-space 속성을 사용하여 텍스트가 한 줄에 표시되도록 설정할 수 있습니다.width 속성을 설정하여 <div>의 너비를 제한하는 것도 중요합니다. 이를 통해 텍스트가 넘치는 부분을 '...' (ellipsis)로 표시하도록 설정할 수 있습니다.아래의 코드 예시는 이러한 속성들을 사용하여 긴 텍스트가 넘칠 경우 '...'으로 표시하는 방법을 보여줍니다.  &l…
  • profile_image 반응형으로 만들기 좋은 부트스트랩에 관한 툴이 있는 사이트입니다.가끔씩 사용할때 레이아웃이 생각나지 않은 경우 이용하면 좋습니다.지원하는 버전은 현재 버전보다 낮은 4버전 이긴 하지만 기본적인것은 동일하기 때문에 사용하는데는 큰 문제는 없습니다. * 찾을 때 검색한 키워드bootstrap design toolbootstrap builder* 부트스트랩 레이아웃 관련된 사이트 https://www.bootstrapcdn.com/https://bootstrap.build/apphttps://www.layoutit.com/https://bootsnipp.com/builder
  • profile_image 현재 페이지에서 표현이 되고 있는 스타일을 간단하게 자바스크립트로 볼 수 있는 방법입니다.const fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0])위에대한 설명입니다.window.getComputedStyle(document.body) - HTML BODY에 대한 모든 스타일을 얻으려면getPropertyValue('font-size') -글꼴 크기의 문자열 값을 얻으려면 예 : (16px)match(/\d+/)[0]) - 숫자 부분 만 얻으려면 예 : (16) - 문자열Number(…