대화 상자가 간단해졌습니다!

3056 단어 javascripthtmltutorialbeginners
웹사이트에서 알림을 처리하는 간단한 방법!

What is dialog box ? ;
HTML 〈 dialog〉 tag is used to create a new popup dialog on a web page. This tag represents a dialog box or other interactive component like window.
The element uses a boolean attribute called open that activate element and facilitate user to interact with it.
HTML dialog is a new tag introduced in HTML5.



여기에서 나는 이것을 사용하여 무엇을 할 수 있는지에 대한 몇 가지 데모를 만들었습니다. 다른 하나는 최고의 스타일을 만들 수 있습니다.

index.html

HTML 코드




 <body>
        <div class="main">
            <h2>Dialog Tutorial</h2>
            <!-- button for opening dialog -->
            <button id="open">Did you know ?</button>
            <p>
                Add your lorem
            </p>

            <div class="container">
                 add your whatever !
            </div>
        </div>

        <dialog class="modal">
            <h2>This alert is created using dialogbox !</h2>
            <p id="dontselect">
                browser support for dialog is not that best, but 
                still the best
                You can style what ever you like for this dialog !
            </p>
            <button id="close">close</button>
        </dialog>
    </body>


*여기서 나는 그것에 집중하지 않은 단순한 스타일링을 만들었습니다*
index.css

.modal {
    max-width: 30em;
}

.container {
    text-align: justify;
    background: #333;
    color: white;
    padding: 3rem;
    aspect-ratio: 1/1;
    min-height: 10em;
    min-width: 10em;
    max-width: 40em;
    max-height: 20em;
    width: min(100% - 2em, 100px);
    margin-inline: auto;
    resize: both;
    border: 2px solid #000000;
    overflow: auto;
}

.modal::backdrop {
    background: #2c272e;
    opacity: 0.5;
}

.noscroll {
    /* background: red; */
    overflow: hidden;
}


이것은 당신의 자바스크립트 파일입니다!

app.js



const btnopen = document.getElementById('open');
const close = document.getElementById('close');
const dialog = document.querySelector('dialog');
const body = document.querySelector('body');

btnopen.onclick = function () {
    dialog.showModal();
    body.classList.add('noscroll');
};

close.onclick = function () {
    dialog.close();
    body.classList.remove('noscroll');
};


스타일링 및 기타 부분 내가 집중하지 않은 부분은 자바 스크립트에서 대화 상자로 작업하는 방법을 보여주었습니다. 브라우저 지원이 100% 최고는 아니지만 많은 것보다 최고이며 이를 구현하기 시작할 수 있습니다.

내 포트폴리오 확인: neeswebservices
내 유튜브 :

Thanks for Reading !!

EKS + Fargate에서 Datadog을 사용하는 APM
Angular에서 오류 포착 및 처리

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage