Bootstrap 3.3.7 | 경고, 다이어로그, 접기 | 경고(alert)

응용 프로그램은 각종 정보를 표시하거나 사용자에게 확인 및 입력 등을 재촉하기 위한 인터페이스가 준비되어 있다. “경고(alert)“와 “다이어로그(dialog)“이다. Bootstrap에도 이러한 인터페이스를 실현하기 위한 기능이 포함되어 있다.

경고(alert)

우선 가장 간단한 “경고(alert)“부터 설명하겠다. Bootstrap에는 약간 메시지 등을 표시하기 위하여 아래와 같이 경고 표시를 제공할 수 있다.

<div class="alert 알람 클래스">
    ……알람 내용……
</div>

class에 “alert"를 지정하면, 경고 표시된다. 단, 그것만으로는 윤곽선만 표시되므로 실제 이용시에는 아울러 아래와 같이 클래스 중에 하나를 추가한다.

클래스 설명
alert-info 약간의 정보 등을 표시한다.
alert-success 어떤 조작이 성공했을 때에 표시하는데 사용한다.
alert-warning 경고 표시이다.
alert-danger 위험을 전하기 위한 표시이다.

이들을 이용하여 경고 표시를 만들 수 있다. 아래에 그 이용 예제이다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Bootstrap</title>
 
    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/script.js"></script>
     
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.min.css">
 
</head>
<body >
     
<div class="container">
             
<div class="row">
    <div class="col-md-12">
         
        <div class="page-header">
            <h1>알람, 다이어로그 표시</h1>
            <h2 >Alert</h2>
        </div>
         
        <div>
 
        <div class="alert alert-info">
            <h4>Alert!</h4>
            이것은 경고 표시입니다.
        </div>
 
         <div class="alert alert-success">
            <h4>Alert!</h4>
            이것은 경고 표시입니다.
        </div>
 
        <div class="alert alert-warning">
            <h4>Alert!</h4>
            이것은 경고 표시입니다.
        </div>
 
        <div class="alert alert-danger">
            <h4>Alert!</h4>
            이것은 경고 표시입니다.
        </div>
 
   </div>
</div>
     
</div>
 
</body>

4개의 경고가 표시된다.

경고 표시 ON/OFF

이 경고는 페이지에 처음부터 표시한다. 단순한 디자인이다. 하지만 실제 경고는 필요에 따라 화면에 표시하거나, 또는 닫기 상자(close box)로 닫을 수 없다면 안 될 것이다.

이러한 경고 같은 작업을 위해는 몇 가지 추가 요소가 필요하다. 먼저 경고 중에 닫기 상자의 표시해야 할 필요가 있을 것이다. 그리고 경고를 표시하는 버튼도 있어야 될 것이다.

닫기 상자(close box)

<a href="#" data-dismiss="alert">×</a>

닫기 상자는 <a> 태그로 사용할 수 있다. 이것은 data-dismiss="alert "라는 속성을 반드시 준비하여 작성한다. 이를 준비하기 위한 경고의 오른쪽 상단에 닫기 상자를 볼 수 있다. 또한, 닫기 상자의 “×"는 <a> 태그에 “×"표시한다.

닫고 사라질 때 효과를 걸 수 있다. 이것은 경고 <div> 태그에 "fade in"클래스를 추가한다. 이것으로 서서히 경고를 사라질 수 있도록 된다.

경고 표시 제어

이것으로 ‘클릭 후 닫기 경고"가 되었다. 그럼 경고를 숨겨놨다가 버튼 등을 클릭하여 표시하려면 어떻게할까?

경보 숨기기로 유지

이는 간단하다. 스타일을 설정하고 숨겨두면 된다. 경고 <div> 태그에 아래와 같은 형태로 스타일 설정하면 된다.

style="display:none;"

경고 표시하기

경고를 표시하려면 숨겨져 있는 <div> 태그를 표시시키면 된다. 이는 jQuery의 show 메소드를 사용하면 편리하다.

$('경보 태그 지정').show();

<button> 태그 등에서 onclick에 이렇게 실행되도록 하여, 클릭하면 경고를 표시할 수 있다.

그럼 간단한 사용 예제를 보도록 하자.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Bootstrap</title>
 
    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
     
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.min.css">
 
</head>
<body >
     
<div class="container">
             
<div class="row">
    <div class="col-md-12">
         
        <div class="page-header">
            <h1>アラート・ダイアログ</h1>
            <h2 >Alert</h2>
        </div>
         
        <div>
        <button class="btn btn-default" onclick="$('#alert').show()">
            Show Alert</button>
        </div>
 
        <div> </div>
 
        <div id="alert" class="alert alert-success fade in" style="display:none;">
            <a href="#" class="close" data-dismiss="alert"
                aria-label="close">×</a>
            <h4>Alert!</h4>
            이것은 알람 표시입니다.
        </div>
 
    </div>
</div>
     
</div>
 
</body>
</html>

페이지를 방문하여 “Show Alert"버튼을 누르면 경보가 표시된다. 그리고 닫기 상자를 클릭하면 경고를 닫힌다.