Blogger 모달(Modal) OnClick 팝업 버튼 코드

모달의 목적은 집중이라는 한 단어로 요약될 수 있습니다. 방문자가 단순한 것에 집중해야 하는 경우 모달 창은 그렇게 하는 가장 효과적인 수단 중 하나입니다. 사용자는 모달을 닫거나 모달 내에서 특정 작업(예: 메시지 읽기 및 '확인' 클릭, 양식 작성 등)을 완료해야 합니다.

모달(Modal)이란?

모달(Modal)은 웹에서 새 창을 띄우는 팝업창과는 달리 같은 브라우저 내부에서 상위 레이어를 띄우는 방식을 사용하는 창입니다. 모달 창이 띄워진 경우, 이 창을 종료하지 않는 이상 원래 창 화면을 작동할 수 없습니다. 따라서, 사용자의 이목을 집중시키기 때문에 신중히 사용할 필요가 있습니다.

1. 블로거 대시보드로 이동합니다.
2. 원하는 게시물이나 페이지를 만듭니다.
3. 표시할 팝업 버튼을 추가하려면 아래 주어진 코드를 복사하여 붙여 넣습니다.

// Script
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
// Button To Trigget
<center><button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">데모를 보려면 클릭합니다.</button></center>
// End Button

// Html
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">테스트 모달 팝업입니다.</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNXRAUueFgxxIqg0oCXblrQZ1TNN5-_JyAFxfkHLe9-NVksLfwEYX6enmXmMIZX5rpa-FLctmyExaaA2WfeTxFje2WratkdQ7JEdY44uQI9ZluSHEpmcAqY1rcoa4daVxr9CYkT_uGXYq-cBSVYui2FA5uA0Vr3GsdoD6p5gReud3626XqnBySaU9l45E/s16000/%EB%AA%A8%EB%8B%AC-Modal-%ED%8C%9D%EC%97%85-%EC%BD%94%EB%93%9C.jpg" /></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">완료</button>
</div></div>
</div>

작동 방식 및 데모

모달 팝업은 부트스트랩 프레임워크를 사용합니다. 누구든지 버튼을 클릭할 때마다 팝업 상단 중간에 표시되며 광고, 고지 사항 또는 iframe 등의 모든 항목을 배치할 수 있습니다. 또한 텍스트를 변경해 사용할 수 있습니다.

테스트 모달 팝업입니다.

테스트

결론

해당 게시물은 모달 팝업을 추가하는 방법에 관한 것입니다. 사용자가 실제로 무언가를 보아야 하는 경우 모달 창은 주의를 집중시키는 데 탁월합니다. 모달에는 중요한 이벤트나 오류에 대한 경고, 일부 작업의 결과에 대한 경고 또는 완료된 프로세스에 대한 확인이 포함될 수 있습니다.