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


웹 애플리케이션에서 다이얼로그 박스나 팝업 창의 기능은 자주 사용하게 되는 기능이다. 이를 위해서 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

요즘은 RESTful한 웹 서비스가 대세를 이루다보니 서버로부터 받는 데이터가 JSON 형태의 데이터가 많다. 즉 서버가 제공하는 API를 통해 데이터를 JSON 형태로 수신하는 경우가 많아졌다. 좀 달리말하면 서버의 특정 URI에로 URL을 던져서 해당 데이터를 JSON으로 수신해야 할 경우 이를 위해 jQuery에서 제공하는 함수인 getJSON() 함수의 용법에 대해서 살펴보고자 한다.


우선 getJSON()의 Syntax를 보면 다음과 같다(https://api.jquery.com/jquery.getjson/ 참조)


getJSON( url [, data ] [, success ] )


이 함수가 하는 기능은 HTTP의 GET method를 통해서 서버의 특정 URI가 던져주는 결과를 JSON 형태로 받아오는 역할을 한다.

(Load JSON-encoded data from the server using a GET HTTP request.)


파라미터는

 -. url : 필수항목으로, 요청이(http request) 보내질 URL이다. 데이터 타입은 String.

 -. data : option으로 key-value쌍으로 구성된 서버로 전송될 데이터.

 -. success : optional으로 서버로부터 JSON 데이터 수신이 완료되었을 때 실행하게 될 function이다. 이 function의 파라미터로 서버가 전송한 JSON 데이터가 담기게 된다.


예제코드를 보자.


아래 코드에서 /replies/all/100의 url을 서버로 던지면 서버에서 결과 값을 JSON 데이터 형태로 반환해 주면 그 결과 데이터(JSON 데이터)가 아래의 function(mData)의 mData에 저장이 된다.


$.getJSON("/replies/all/100", function(mData){

console.log("데이터 길이: ", mData.length);

console.log("데이터 mData[0].replytext: ", mData[0].replytext); 


//아래에서 다음과 같은 로그 출력이 된다.

//getPageList() mData : [object Object]

console.log("getPageList() mData : " + mData);


//아래에서 다음과 같은 로그 출력됨

//getPageList() mData.list : [object Object],[object Object],[object Object],[object Object]...

console.log("getPageList() mData.list : " + mData.list);

//JSON 데이터를 String 형태로 출력할때 JSON.stringify()를 활용하면 편리하다.

//JSON.stringify()에 의해서 JavaScript Object가 String으로 변환되어 myJSON에 저장이된다.

var myJSON = JSON.stringify(mData);

console.log("myJSON : "+myJSON);

});


위의 마지막 코드에서 JSON 포맷의 데이터가 줄이줄줄이 출력이 될 것이다.


[{"rno":17,"bno":100,"replytext":"연습중... ","replyer":"eeeeeee","regdate":1533170966000,"updatedate":1533190576000},{"rno":14,"bno":100,"replytext":"ccc...라는 걸 수정함","replyer":"ccc","regdate":1533117687000,"updatedate":1533190598000},{"rno":11,"bno":100,"replytext":"Ajax로 댓글 작성 후 화면 새로 고침 없이 막바로 되나?","replyer":"Ajax","regdate":1533117629000,"updatedate":1533117629000},{"rno":10,"bno":100,"replytext":"실리콘 벨리에서의 개발자의 삶","replyer":"실리콘","regdate":1533117004000,"updatedate":1533117004000},{"rno":9,"bno":100,"replytext":"이름이 없는 분이 댓글을 자꾸다네~~~ㅋㅋㅋ","replyer":"홍길동","regdate":1533116371000,"updatedate":1533116371000},{"rno":6,"bno":100,"replytext":"미션 임파시블 영화 많이 봐주세요~  from 톰크루즈","replyer":"톰크루즈","regdate":1533115205000,"updatedate":1533190943000},{"rno":3,"bno":100,"replytext":"둘리야 놀자","replyer":"또치","regdate":1533009522000,"updatedate":1533009522000},{"rno":2,"bno":100,"replytext":"감사합니다","replyer":"홍길동","regdate":1533008551000,"updatedate":1533008551000},{"rno":1,"bno":100,"replytext":"수정한 댓글입니다.","replyer":"user00","regdate":1533006012000,"updatedate":1533020309000}]


이러한 데이터를 순차적으로 취급할때는 jQuery가 제공하는 .each()함수를 많이 이용한다. 

아래는 each()함수의 Syntax이다.


.each( function )


이 함수는 jQuery object나 DOM의 특정 element에 대해 for loop과 같은 반복문 동작을 수행한다.

(Iterate over a jQuery object, executing a function(each함수 안에 있는 function) for each matched element.)


파라미터의 function은 다음과 같은 형태로 되어 있다.


function(Integer index, Element element)


위의 JSON 데이터가 담겨 있는 mData에 대해 다음과 같이 처리할수 있다.


var str = "";


//for loop과 같은 반복문이다.

$(mData).each(function(){

//이 경우의 this는 mData라는 객체를 의미한다.

str += "<li>" + this.rno + ":" + this.replytext + "</li>";

});



.each()에 대해 좀더 간단한 예를 통해 이 함수의 기능을 살펴 보면

다음과 같은 내용이 있다고 할때


<ul>

     <li>Android</li>

     <li>Java</li>

     <li>Spring MVC</li>

</ul>


위의 li안에 있는 각 항목들을 모두 출력해 볼려면 jQuery의 .each()함수를 다음과 같이 이용하면 된다. 

아래의 경우는 DOM의 element 중에서 li라는 element에 대해 for loop 기능을 수행하겠다는 것이다.


$("li").each(function(index) {

//여기서 this는 li를 의미한다.

console.log(index + " : " + $(this).text());

});


결과는 다음과 같이 출력될 것이다.

0 : Android

1 : Java

2 : Spring MVC




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

'jQuery' 카테고리의 다른 글

부트스트랩의 모달 창 사용하기  (1) 2018.08.06
jQuery를 이용해서 select 태그의 선택된(selected) 항목의 값 가져오기.  (0) 2018.07.25

jQuery를 이용해서 콤보 박스 혹은 full-down 메뉴인 select 태그의 선택된(selected) 항목의 값 가져오기.


2가지 방법으로 처리해 보고자 한다.

첫 번째는 select 태그를 이용해서 값을 가져오는 방법과 두 번째는 select의 id를 이용해서 값을 가져오는 방법이다.

자세한 방법은 아래 코드에서...


<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

</head>

<body>

<select name="name_Select" id="id_Select">

<option value="val1">txtVal1</option>

<option value="val2">txtVal2</option>

<option value="val3">txtVal3</option>

<option value="val4">txtVal4</option>

</select>

<hr/>

<button id="valFunc_tag">val 함수 using tag name</button><br/>

<button id="textFunc_tag">text 함수 using tag name</button>

<hr/>

<button id="valFunc_id">val 함수 using id</button><br/>

<button id="textFunc_id">text 함수 using id</button>

<script>

$(document).ready(function(){

$("#valFunc_tag").on("click", function(){

//select라는 태그 이름을 이용해서 select 박스를 선택한 후

// .val()함수로 값을 가져오면 option의 value 값을 가져온다. 

//따라서 val1, val2, val3...의 값을 가져온다.

var kkk = $("select option:selected").val();

alert(kkk);

});


$("#textFunc_tag").on("click", function(){

//select라는 태그 이름을 이용해서 select 박스를 선택한 후

// .text()함수로 값을 가져오면 option의 text 값을 가져온다. 

//따라서 txtVal1, txtVal2, txtVal3...의 값을 가져온다.

var kkk = $("select option:selected").text();

alert(kkk);

});

$("#valFunc_id").on("click", function(){

//아래의 경우는 select 박스의 id를 이용해서 select 박스를 선택하되

//나머지는 위의 설명과 같다.

var kkk = $("#id_Select option:selected").val();

alert(kkk);

});


$("#textFunc_id").on("click", function(){

var kkk = $("#id_Select option:selected").text();

alert(kkk);

});

});

</script>

</body>

</html>


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

'jQuery' 카테고리의 다른 글

부트스트랩의 모달 창 사용하기  (1) 2018.08.06
jQuery의 getJSON()과 each() 함수의 사용법  (0) 2018.08.02

+ Recent posts

티스토리툴바