JS외부파일 사
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous">
</head>
<body>
<div id="liveAlertPlaceholder" ></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">
Show live alert
</button>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous">
</script>
<script type="text/javascript" src="js/snippets.js">
</script>
</body>
</html>
snippets.js
const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
const appendAlert = (message, type) => {
const wrapper = document.createElement('div')
wrapper.innerHTML = [
`<div class="alert alert-${type} alert-dismissible" role="alert">`,
` <div>${message}</div>`,
' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
'</div>'
].join('')
alertPlaceholder.append(wrapper)
}
const alertTrigger = document.getElementById('liveAlertBtn')
if (alertTrigger) {
alertTrigger.addEventListener('click', () => {
appendAlert('Nice, you triggered this alert message!', 'success')
})
}
일반적인 Alert 함수
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous">
</head>
<body>
<div id="liveAlertPlaceholder" ></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">
Show live alert
</button>
<script type="text/javascript">
//출력 위치
const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
const appendAlert = (message, type) => {
const wrapper = document.createElement('div')
wrapper.innerHTML = [
`<div class="alert alert-${type} alert-dismissible" role="alert">`,
` <div >${message}</div>`,
' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
'</div>'
].join('')
alertPlaceholder.append(wrapper)
}
//버튼을 클릭하면 발동
const alertTrigger = document.getElementById('liveAlertBtn')
if (alertTrigger) { //클릭할 때마다 appendAlert 작동
alertTrigger.addEventListener('click', () => {
//message(들어갈 문구) / type(색상)
appendAlert('Nice, you triggered this alert message!', 'primary')
})
}
</script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous">
</script>
</body>
</html>
'단순 코드 기록 > BootStrap' 카테고리의 다른 글
| BootStrap_Button (0) | 2024.02.09 |
|---|---|
| BootStrap_Badge (0) | 2024.02.09 |
| BootStrap_Color (0) | 2024.02.09 |
| BootStrap_Grid (0) | 2024.02.09 |
| BootStrap_Basic (0) | 2024.02.09 |