본문 바로가기
jQuery/w2ui

[w2ui] w2ui로 팝업창 오픈하기

사악미소 2016. 9. 12. 16:53
반응형

■ w2ui로 팝업창 띄우기



01. 가장 기본적인 w2ui로 팝업창을 띄우는 방법이다.

 w2ui_popup_simple.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W2UI</title>
    <link rel="stylesheet" type="text/css" href="./css/w2ui-1.4.3.css"/>
    <script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="./js/w2ui-1.4.3.js"></script>
</head>
<body>
<button class="btn" onclick="popup()">Open Popup</button>
<script type="text/javascript">
function popup() {
    w2popup.open({
          title:"Popup Title"
        , body:"<div class='w2ui-centered'>This is text inside the popup</div>"
        , buttons:"<button class='btn' onClick='w2popup.close();'>Close</button>"
        , showMax:true
    });
}
</script>
</body>
</html>



02. 출력결과는 아래와 같다.






■ w2ui로 알림창 띄우기




01. 팝업창과 마찬가지로 기본적인 alert 창을 띄울 수있다.

 w2ui_alert_popup.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W2UI</title>
    <link rel="stylesheet" type="text/css" href="./css/w2ui-1.4.3.css"/>
    <script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="./js/w2ui-1.4.3.js"></script>
</head>
<body>
<button class="btn" onclick="w2alert('경고창')">Show Alert</button>
</body>
</html>




02. 출력결과는 아래와 같다.






■ w2ui로 선택 알림창 띄우기




01.alert창을 띄운것처럼 선택알림창인 confirm 창을 띄울 수 있다.

 w2ui_confirm_popup.php
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W2UI</title>
    <link rel="stylesheet" type="text/css" href="./css/w2ui-1.4.3.css"/>
    <script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="./js/w2ui-1.4.3.js"></script>
</head>
<body>
<button class="btn" onclick="w2confirm('두개중 하나를 선택하시오.', '선택창', function(btn){console.log(btn);})">
    Show Confirm
</button>
</body>
</html>




02. 출력결과는 아래와 같다.









■ w2ui의 팝업창의 옵션



※ 팝업 이벤트 옵션

 title

 팝업창의 제목 설정
 body

 팝업창의 내용 구성

 buttons

  팝업창의 HTML 버튼 구성

 modal

 모달 영역의 기능 설정, true인 경우 팝업창 이외의 영역 클릭 및 선택 불가, false인 경우 팝업창 이외의 영역 클릭시 팝업창이 닫힘

 width

 팝업창의 넓이를 설정한다.

 height

 팝업창의 높이를 설정한다.

 style

 CSS태그를 입력하면 body 영역에 지정한 CSS에 태그가 반영되어 스타일을 변경 할 수 있다.
 color

 팝업창이 오픈되었을때 모달 영역에 나타나는 색상을 지정한다.

 opacity

 팝업창이 오픈되었을때 모달 영역의 백그라운드의 투명도를 지정한다.

 speed

 팝업창이 오픈되었을때 속도를 조절한다.

 transition

 팝업창의 내용변경 이벤트

 showClose

 팝업창 닫기 × 아이콘 나타내기(true인 경우 × 아이콘이 존재하고, false인 경우 × 아이콘이 존재하지 않는다.)

 showMax
 팝업창 화면 크기 조절 □ 아이콘 나타내기(true인 경우 □ 아이콘이 존재하고, false인 경우 □ 아이콘이 존재하지 않는다.)
 keyboard 팝업창을 키보드 ESC 버튼으로 팝업창 닫기(true 종료, false 팝업창 오픈)
 onOpen 팝업창이 오픈 될때 실행되는 이벤트 지정
 onClose 팝업창이 종료 될때 실행되는 이벤트 지정
 onMax 팝업창이 작아질때 실행되는 이벤트
 onMin 팝업창이 작아질때 실행되는 이벤트
 onToggle 팝업창이 최대/최소 크기로 변경될때마다 실행되는 이벤트
 onKeyboard 팝업창을 키보드 ESC 버튼을 눌러 종료하였을경우 실행되는 이벤트



01. 팝업창 이벤트 상세 적용

 w2ui_option_popup.php
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W2UI</title>
    <link rel="stylesheet" type="text/css" href="./css/w2ui-1.4.3.css"/>
    <script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="./js/w2ui-1.4.3.js"></script>
</head>
<body>
<button class="btn" onclick="popup()">Open Popup</button>
<input type="text"/>
<script type="text/javascript">
function popup() {
    w2popup.open({
          title:"Popup Title"
        , body:"<div class='w2ui-centered'>This is text inside the popup</div>"
        , buttons:"<button class='btn' onClick='w2popup.close();'>Close</button>"
        , width:"500"
        , height:"300"
        , color:"#FFFFCC"
        , style:"background-color:#EEEEEE"
        , speed:"0.3"
        , opacity:"0.8"
        , modal:true
        , transition:null
        , showClose:true
        , showMax:true
        , onOpen:function(event){console.log("open");}
        , onClose:function(event){console.log("close");}
        , onMax:function(event){console.log("max");}
        , onMin:function(event){console.log("min");}
        , onToggle:function(event){console.log("toggle");}
        , onKeydown:function(event){console.log("keydown");}
    });
}
</script>
</body>
</html>




02. 출력결과는 아래와 같다.







■ HTML 기본 설정되어있는 내용 w2ui로 팝업하기


 w2ui_based_popup.php
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W2UI</title>
    <link rel="stylesheet" type="text/css" href="./css/w2ui-1.4.3.css"/>
    <script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="./js/w2ui-1.4.3.js"></script>
</head>
<body>
<button class="btn" onclick="jQuery('#popup').w2popup()">Open Popup</button>
<div id="popup" style="display:none;width:600px;height:400px;overflow:hidden">
    <div rel="title">
        Popup Title
    </div>
    <div rel="body" style="padding:10px;line-height:150%">
        <div style="float:left;background-color:white;width:150px;height:80px;border:1px solid silver;margin:5px;"></div>
        This is body of popup. You can put any text or HTML inside the body (as well as title and buttons).
        This is body of popup. You can put any text or HTML inside the body (as well as title and buttons).
        This is body of popup. You can put any text or HTML inside the body (as well as title and buttons).
        This is body of popup. You can put any text or HTML inside the body (as well as title and buttons).
        This is body of popup. You can put any text or HTML inside the body (as well as title and buttons).
        This is body of popup. You can put any text or HTML inside the body (as well as title and buttons).
        This is body of popup. You can put any text or HTML inside the body (as well as title and buttons).
        This is body of popup. You can put any text or HTML inside the body (as well as title and buttons).
        This is body of popup. You can put any text or HTML inside the body (as well as title and buttons).
        This is body of popup. You can put any text or HTML inside the body (as well as title and buttons).
        This is body of popup. You can put any text or HTML inside the body (as well as title and buttons).
    </div>
    <div rel="buttons">
        <button class="btn" onclick="jQuery('#popup').w2popup('close')">Close</button>
    </div>
</div>
</body>
<script type="text/javascript">
</script>
</html>



02. 출력결과는 아래와 같다.






■ 다른페이지 URL로 w2ui로 팝업창 불러오기




01. 다음은 다른 페이지의 내용을 w2ui로 불러오는 방법이다.

 w2ui_url_popup.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W2UI</title>
    <link rel="stylesheet" type="text/css" href="./css/w2ui-1.4.3.css"/>
    <script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="./js/w2ui-1.4.3.js"></script>
</head>
<body>
<button class="btn" onclick="w2popup.load({url:'twice.html', showMax:true})">Open Popup</button>
</body>
</html>
 twice.html

<body>
<div id="popup" style="display:none;width:600px;height:400px;overflow:hidden">
    <div rel="title">
        CHEER UP
    </div>
    <div rel="body" style="padding:10px;line-height:150%">
        <font color="#FF99FF">
            <b>[나연] 매일 울리는 벨벨벨 이젠 나를 배려 해줘 배터리 낭비하긴 싫어</b><br/>
        </font>
        [미나] 자꾸만 봐 자꾸 자꾸만 와 전화가 펑 터질 것만 같아<br/>
        [사나] 몰라 몰라 숨도 못 쉰대 나 때문에 힘들어 쿵 심장이 떨어진대 왜<br/>
        [미나] 걔 말은 나, 너무 예쁘대 자랑 하는건 아니구<br/>
        [쯔위] 아까는 못 받아서 미안해<br/>
        [사나] 친구를 만나느라 shy shy shy<br/>
        [쯔위] 만나긴 좀 그렇구 미안해<br/>
        [미나] 좀 있다 연락할게 later<br/>
        [모모] 조르지마 얼마 가지 않아 부르게 해줄게 Baby<br/>
        [정연] 아직은 좀 일러 내 맘 같긴 일러 하지만 더 보여줄래<br/>
        [지효] Cheer up baby Cheer up baby 좀 더 힘을 내<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        여자가 쉽게 맘을 주면 안돼 그래야 니가 날 더 좋아하게 될걸<br/>
        <font color="#FF99FF">
            <b>[나연] 태연하게 연기할래 아무렇지 않게 내가 널 좋아하는 맘 모르게<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            just get it together and then baby Cheer up</b>
        </font>
    </div>
    <div rel="buttons">
        <button class="btn" onClick="jQuery('#popup').w2popup('close')">Close</button>
    </div>
</div>
</body>




02. 출력결과는 아래와 같다.



반응형
저작자표시

'jQuery > w2ui' 카테고리의 다른 글

[w2ui] w2ui의 그리드(Grid) 그리기  (0) 2016.09.19
[w2ui] 팝업창에 기능에 따른 버튼 추가하기  (0) 2016.09.13
[w2ui] TEXTBOX에 리스트 나타내기  (0) 2016.09.12
[w2ui] w2ui 텍스트 필드에서 시간 설정하기  (0) 2016.09.09
[w2ui] w2ui 캘린더 한글 달력으로 변환히기  (0) 2016.09.09

'jQuery/w2ui' Related Articles

티스토리툴바