웹의 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>
댓글 없음:
댓글 쓰기