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. 출력결과는 아래와 같다.
