특정 웹 페이지 로딩시 프로그레서 바/프로그레스 써클 띄워야 할 경우가 있다면 dialog 태그와 img 태그와 로딩 이미지를 보여주는 gif 이미지를 적절히 조합하여 로딩 상태를 띄워줄수가 있다. 
아래는 코드이다.

<html>
<head>
	<title>프로그레스 써클 띄우기</title>
	<style>

	</style>
</head>
<body>
	<br/>
	<button onclick="showProCircle()" style="padding: 5px;"> 프로그레스 써클 띄우기 </button><br/>
	<h3> 5초 후에 자동으로 닫힙니다. </h3>

	<div>
		<!-- dialog 태그를 border-radius 속성을 이용해서 원형으로 만들고 gif 이미지도 동일하게 원형으로 만든다 -->
		<dialog id="progressCircleDialog" style="width:200px; height:200px; padding:-5px; background-color:#ffffff; border: 0px solid black; border-radius: 50%;">
			<img style="width: 100%; height: 100%; display: block; margin: 0px auto; padding: 0px; border-radius: 50%;" src="loading.gif">
		</dialog>
	</div>
	<script>
		function showProCircle(){
			var dialog = document.getElementById("progressCircleDialog");
			dialog.showModal();

			setTimeout(function(){
				dialog.close();
			}, 5000);
		}
	</script>
</body>
</html>

'HTML' 카테고리의 다른 글

dialog 태그를 이용한 모달 창 만들기 - alert 대체용 메시지 창 만들기  (0) 2020.10.29
HTML의 col 태그에 대해서  (0) 2018.08.31
크롬 웹 브라우저의 개발자 도구 - 검사 (특정 영역의 html 요소 확인하기)  (0) 2018.08.22
textarea 내용을 초기화 하는 법  (0) 2018.06.11
HTML 링크를 새 창에서 열기  (0) 2015.10.26

웹의 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

부트스트랩의 모달 창 사용하기


웹 애플리케이션에서 다이얼로그 박스나 팝업 창의 기능은 자주 사용하게 되는 기능이다. 이를 위해서 alert()이나 prompt()를 기본적으로 사용하게 될텐데 그 모양이 그렇게 아름다웁지는 않다는 것과 혹은 원치 않는 정보가 보여져야하는 등의 이유로 인해서 본 포스팅에서는 부트스트랩이 제공하는 모달 창에 대해서 정리해보고자 한다.


모달 창이라 함은 현재 페이지 상의 최 상위에 띄워지는 일종의 다이얼로그 박스나 팝업창을 말한다.

부트스트랩의 모달 창을 사용하기 위해서는 아래의 라이브러리들을 포함시켜 줘야 한다.


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


아래는 코드 조각이다.


<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

 

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>


<!-- 부트스트랩의 모달 창을 사용할려면 아래의 class 이름들을 그대로 사용해야 한다. 변경하면 모양이 달라진다.-->

  <!-- Modal -->

  <div class="modal fade" id="myModal" role="dialog"> <!-- 사용자 지정 부분① : id명 -->

    <div class="modal-dialog">

    

      <!-- Modal content-->

      <div class="modal-content">

        <div class="modal-header">

          <button type="button" class="close" data-dismiss="modal">×</button>

          <h4 class="modal-title">모달 창 타이틀</h4> <!-- 사용자 지정 부분② : 타이틀 -->

        </div>

        <div class="modal-body">

          <p>여기에 필요한 텍스트 메시지 넣기</p> <!-- 사용자 지정 부분③ : 텍스트 메시지 -->

        </div>

        <div class="modal-footer">

          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

        </div>

      </div>

    </div>

  </div>


<br/><br/>

<!-- 아래에서 data-toggle과 data-target 속성에서 data-toggle에는 modal 값을 data-target속성에는 모달 창 전체를 

감싸는 div의 id 이름을 지정하면 된다. -->

&nbsp;&nbsp;<button type="button" data-toggle="modal" data-target="#myModal">모달 창 열기</button>

&nbsp;&nbsp;<a data-toggle="modal" href="#myModal">모달 창 열기</a>


</body>

</html>


위 코드가 실행되면 다음과 같은 모양의 모달 창이 뜨게 될 것이다.




저작자표시 비영리 변경금지

'jQuery' 카테고리의 다른 글

jQuery의 getJSON()과 each() 함수의 사용법  (0) 2018.08.02
jQuery를 이용해서 select 태그의 선택된(selected) 항목의 값 가져오기.  (0) 2018.07.25

+ Recent posts

티스토리툴바