웹의 view단을 작업할때 alert() 함수를 이용해서 사용자에게 필요한 알림을 제공하게 된다. 가장 간단하고 쉬운 방법이나 alert()을 사용할때 예상치 못한 곤란을 만날수도 있다. 아무튼 alert()과 같은 역할을 하면서 alert()을 대체할수 있는 dialog 태그에 대해 정리하고자 한다.
<html>
<head>
<title>alert을 대체할 dialog 태그</title>
<style>
#myMsgDialog {
width:40%;
background-color: #f4ffef;
border:1px solid black;
border-radius: 7px;
}
#mButton {
padding: 7px 30px;
background-color: #66ccff;
color: white;
font-size: 15px;
border: 0;
outline: 0;
}
</style>
</head>
<body>
<button onclick="showMsg()">메시지 띄우기</button>
<div>
<!-- 아래 dialog 태그 영역이 메시지 창 -->
<dialog id="myMsgDialog">
<h3>여기는 메시지 내용입니다.</h3>
<input type="button" id="mButton" onclick="closeMsg()" value=" 확 인 " >
</dialog>
</div>
<script>
function showMsg(){
var dialog = document.getElementById("myMsgDialog");
dialog.showModal();
}
function closeMsg(){
var dialog = document.getElementById("myMsgDialog");
dialog.close();
}
</script>
</body>
</html>코드가 그렇게 복잡하지는 않다. 아무튼 alert() 대체용으로 간단하면서 아주 유용한 기능이다. 아래는 실행 결과이다.
'HTML' 카테고리의 다른 글
| 웹 페이지에서 프로그레스 써클 띄우기 (0) | 2020.12.01 |
|---|---|
| HTML의 col 태그에 대해서 (0) | 2018.08.31 |
| 크롬 웹 브라우저의 개발자 도구 - 검사 (특정 영역의 html 요소 확인하기) (0) | 2018.08.22 |
| textarea 내용을 초기화 하는 법 (0) | 2018.06.11 |
| HTML 링크를 새 창에서 열기 (0) | 2015.10.26 |