본문 바로가기
jQuery/w2ui

[w2ui] 팝업창에 기능에 따른 버튼 추가하기

사악미소 2016. 9. 13. 15:34
반응형

■ w2ui 팝업창 닫기버튼



01. 팝업창 닫기 버튼은 아래와 같다.

 w2ui_close_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:500px;height:300px;overflow:hidden">
    <div rel="title">
        닫기 버튼
    </div>
    <div rel="body" style="padding:10px;line-height:150%;top:40%;text-align:center;">
        닫기 버튼 테스트
    </div>
    <div rel="buttons">
        <button class="btn" onclick="jQuery('#popup').w2popup('close')">Close</button>
    </div>
</div>
</body>
</html>


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




■ w2ui 로딩중 화면 띄우기



01. 로딩중 화면을 띄우기 위한 코드는 아래와 같다.

 w2ui_lock_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:500px;height:300px;overflow:hidden">
    <div rel="title">
        로딩중 표시
    </div>
    <div rel="body" style="padding:10px;line-height:150%;top:40%;text-align:center;">
        로딩중 표시
    </div>
    <div rel="buttons">
        <button class="btn" onclick="lock('')">로딩중</button>
    </div>
</div>
<script type="text/javascript">
function lock(msg) {
    w2popup.lock(msg, true);
    setTimeout(function () {
        w2popup.unlock();
    }, 2000);
}
</script>
</body>
</html>



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




■ w2ui 로딩중 화면에 텍스트 나타내기



01. 로딩중 화면에 텍스트를 나타내 보자, 코드는 아래와 같다.

 w2ui_lock_text_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:500px;height:300px;overflow:hidden">
    <div rel="title">
        로딩중 표시
    </div>
    <div rel="body" style="padding:10px;line-height:150%;top:40%;text-align:center;">
        로딩중 표시
    </div>
    <div rel="buttons">
        <button class="btn" onclick="lock('로딩중')">로딩중</button>
    </div>
</div>
<script type="text/javascript">
function lock(msg) {
    w2popup.lock(msg, true);
    setTimeout(function () {
        w2popup.unlock();
    }, 2000);
}
</script>
</body>
</html>



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






■ w2ui 팝업창에서 슬라이드 메시지 나타내기



01. 팝업창에서 슬라이드 메시지를 나타내보자.

 w2ui_slide_message.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:500px;height:300px;overflow:hidden">
    <div rel="title">
        슬라이드 메시지 나타내기
    </div>
    <div rel="body" style="padding:10px;line-height:150%;top:40%;text-align:center;">
        이 위로 슬라이드 메시지가 나타납니다.
    </div>
    <div rel="buttons">
        <button class="btn" onclick="showMessage()">슬라이드 메시지</button>
    </div>
</div>
<script type="text/javascript">
function showMessage() {
    w2popup.message({
          width : 400
        , height : 180
        , html :
              "<div style='padding:60px;text-align:center'>메롱~!!</div>"
            + "<div style='text-align:center'><button class='btn' onclick='w2popup.message()'>닫기</button>"
    });
}
</script>
</body>
</html>



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






반응형
저작자표시

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

[w2ui] 그리드(Grid) 오름차순, 내림차순 정렬 기능 추가하기.  (0) 2016.09.19
[w2ui] w2ui의 그리드(Grid) 그리기  (0) 2016.09.19
[w2ui] w2ui로 팝업창 오픈하기  (0) 2016.09.12
[w2ui] TEXTBOX에 리스트 나타내기  (0) 2016.09.12
[w2ui] w2ui 텍스트 필드에서 시간 설정하기  (0) 2016.09.09

'jQuery/w2ui' Related Articles

티스토리툴바