부트스트랩5 모달 창, 자바스크립트로 제어하기

부트스트랩5의 모달창을 버튼이나 링크가 아닌 자바스크립트로 제어하는 방법

 

1. 우선 소스 하단에 모달 소스를 배치해놓는다.

		<!-- Modal -->
		<div class="modal fade" id="coplemodal" 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">
		        <h1 class="modal-title fs-5" id="staticBackdropLabel">Modal title</h1>
		        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		      </div>
		      <div class="modal-body">
		        ...
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
		        <button type="button" class="btn btn-primary">Understood</button>
		      </div>
		    </div>
		  </div>
		</div>

 

2. Modal 을 변수로 불러온다.

const myModal = new bootstrap.Modal('#coplemodal', {options})

 

3. Display 보이게 메소드를 사용해준다.

myModal.show() // 보이게
myModal.hide() // 안보이게

 

나머지 메소드나 옵션은 DOCS 를 참고하자.

https://getbootstrap.com/docs/5.2/components/modal/#via-javascript

Modal

 

 

Via JavaScript 

Create a modal with a single line of JavaScript:

 

const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
// or
const myModalAlternative = new bootstrap.Modal('#myModal', options)

Options 

As options can be passed via data attributes or JavaScript, you can append an option name to data-bs-, as in data-bs-animation="{value}". Make sure to change the case type of the option name from “camelCase” to “kebab-case” when passing the options via data attributes. For example, use data-bs-custom-class="beautifier" instead of data-bs-customClass="beautifier".

As of Bootstrap 5.2.0, all components support an experimental reserved data attribute data-bs-config that can house simple component configuration as a JSON string. When an element has data-bs-config='{"delay":0, "title":123}' and data-bs-title="456" attributes, the final title value will be 456 and the separate data attributes will override values given on data-bs-config. In addition, existing data attributes are able to house JSON values like data-bs-delay='{"show":0,"hide":150}'.

NameTypeDefaultDescription

backdrop	boolean, 'static'	true	Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn’t close the modal when clicked.
focus	boolean	true	Puts the focus on the modal when initialized.
keyboard	boolean	true	Closes the modal when escape key is pressed.

Methods 

Asynchronous methods and transitions 

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

Passing options 

Activates your content as a modal. Accepts an optional options object.

 

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})

MethodDescription

dispose	Destroys an element’s modal. (Removes stored data on the DOM element)
getInstance	Static method which allows you to get the modal instance associated with a DOM element.
getOrCreateInstance	Static method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn’t initialized.
handleUpdate	Manually readjust the modal’s position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).
hide	Manually hides a modal. Returns to the caller before the modal has actually been hidden (i.e. before the hidden.bs.modal event occurs).
show	Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.bs.modal event occurs). Also, you can pass a DOM element as an argument that can be received in the modal events (as the relatedTarget property). (i.e. const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle	Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the shown.bs.modal or hidden.bs.modal event occurs).