javascript - 이동 가능한 레이어팝업 소스

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

<style type="text/css">
 
#poplayer_No { position:absolute; font-family:굴림; font-size:12px; border:1px solid #000000;width:400; VISIBILITY: hidden;}
 
.notice { left:170; top:170; height:22; color:#ffffff; font-weight:bold; background-color:orange; padding:5; width:400; cursor:move;}
 
.contents { clear:both; width:320; height:280; padding:0}
 
.winClose { width:65; height:16; background-color:#ffffff; padding:5 5 0 5; font-weight:bold; cursor:pointer;}
 
</style>
 
<script language="javascript">
 
window.onload = function() {
 
    with(document) {
 
        getElementById("layer_move").onmousedown = function() { onMove_layer(1); }
 
        getElementById("htmlMove").onmousemove = getMove;
 
        getElementById("htmlMove").onmouseup = function() { onMove_layer(0); };    
 
        getElementById("notNote").onclick = function() { noticeClose('poplayer_No',1); };        
 
        getElementById("winClose").onclick = closeWin;
 
    }
 
}
 
//---------------------------------------------Layer Move---------------------------------------------------------//
 
var move_on, x_styleLeft, y_styleTop, x_accept, y_accept;
 
move_num = 0;
 
function onMove_layer(chk) {
 
    var val = document.getElementById("poplayer_No");
 
    if (chk ==1) {
 
        x_styleLeft = event.clientX - val.offsetLeft;
 
        y_styleTop = event.clientY - val.offsetTop;
 
    }
 
    move_num = chk;
 
}
 
function getMove() {
 
    var val = document.getElementById("poplayer_No")
 
    if (move_num == 1) {
 
        x_accept = event.clientX - x_styleLeft;
 
        y_accept = event.clientY - y_styleTop;
 
        if (x_accept > 1) { val.style.left = x_accept }
 
        if (y_accept > 1) { val.style.top = y_accept }
 
    }
 
}
 
//-------------------------------------------------PopCookies-----------------------------------------------------------------//
 
//팝업을 그만 띄운다.
 
function SetNoticeCookie(name, day) {
 
    var ExpDate = new Date();
 
    ExpDate.setDate(ExpDate.getDate() + day);
 
    document.cookie = name + "=" + escape("No") + "; path=; expires=" + ExpDate.toGMTString() + ";" 
 
}
 
//팝업창을 띄우기전 사용자의 쿠키를 체크
 
function getNoticeCookie(name) {
 
    var nameOfCookie = name + "="; 
 
    var x = 0; 
 
    while ( x <= document.cookie.length ) 
 
    { 
 
            var y = (x+nameOfCookie.length); 
 
            if ( document.cookie.substring( x, y ) == nameOfCookie ) { 
 
                    if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 ) 
 
                            endOfCookie = document.cookie.length; 
 
                    return unescape( document.cookie.substring( y, endOfCookie ) ); 
 
            } 
 
            x = document.cookie.indexOf( " ", x ) + 1; 
 
            if ( x == 0 ) 
 
                    break; 
 
    } 
 
    return ""; 
 
}         
 
</script>
 
<body id="htmlMove">
 
<div id="poplayer_No" name="poplayer_No">
 
    <div class="notice" id="layer_move">▒  이벤트 안내 ▒</div>
 
    <div class="contents">
 
<table id="Table_01" style="width: 00px;" border="0" cellspacing="0" cellpadding="0" align="center">
 
<tbody>
 
<tr>
 
<td>팝업 내용</td>
 
</tr>
 
</tbody>
 
</table>
 
</div>
 
    <div style="text-align:bottom">
 
        <div style="text-align:right">
 
            <input type="checkbox" id="notNote">오늘 하루 뛰우지 않음　<span class="winClose" id="winClose">[ 닫기 ]</span>
 
        </div>
 
    </div>
 
</div>
 
<script language="javascript">
 
function noticeShow(divid){
 
    var divObj = document.getElementById(divid);
 
    divObj.style.visibility = "visible";
 
}
 
function noticeHide(divid) {
 
    var divObj = document.getElementById(divid);
 
    divObj.style.visibility = "hidden";
 
}
 
function noticeClose(divid, closday)
 
{
 
    noticeHide(divid);
 
    SetNoticeCookie(divid, closday);
 
}
 
function closeWin() { 
 
document.getElementById('poplayer_No').style.visibility = "hidden";
 
} 
 
if (getNoticeCookie('poplayer_No') != "No") {
 
     noticeShow('poplayer_No'); 
 
}
 
</script>
 
</body>

List of Articles
번호	제목	날짜	조회 수
127	디자이너를 위한 레이어 탭 더 빠르게 만들기	2016.09.11	5489
126	간단하게 우클릭 막는방법	2016.09.11	6089
125	JDK6 (Java SE Development Kit 6)이하 버전 다운로드 주소	2016.09.11	6407
124	이클립스 실행할때 자신이 원하는 JDK 지정하는 방법	2016.09.11	5703
123	특정 HTML DOM 엘레멘트로 스크롤 이동하기	2016.09.09	7326
122	모바일 홈페이지로 자동 이동하는 방법....	2016.09.01	6974
»	이동 가능한 레이어팝업 소스	2016.09.01	7430
120	jquery offset()을 이용한 부드러운 스크롤 이동	2016.09.01	7557
119	이벤트 - 페이지 로드 후 이벤트 처리하기 ( window.onload )	2015.06.19	11153
118	iframe사용시 높이 자동 조절	2015.06.19	7248
117	[라디오버튼 오류 체크] 간단한 문제 예제	2015.06.19	8000
116	자바스크립트 아이디 기억하기 기능 구현 (쿠키저장)	2015.06.19	11195
115	공백 검사 함수	2015.06.19	15523
114	자바스크립트 API 문서	2015.06.19	9388
113	JSON API - JSON.parse(), JSON.stringify() ( json 형태의 문자열을 JSON객체로 , JSON객체를 문자열로 )	2015.06.19	6581
112	창 크기 최대화 시키기	2015.06.19	12522
111	예제 - 이미지를 원본 크기로 볼 수 있도록 새창으로 열기 확장 (리사이징 및 이미지 드래그)	2015.06.19	7052
110	Location 객체 - URL 파싱 - URL에서 전달인자 추출하기 함수 작성	2015.06.19	8802
109	창에 대한 정보얻기 (창 크기, 창 위치)	2015.06.19	7581
108	핸드폰 번호 일부 마스킹크 작업 (정규식 이용)	2015.06.19	11029

127

디자이너를 위한 레이어 탭 더 빠르게 만들기

2016.09.11

5489

126

간단하게 우클릭 막는방법

2016.09.11

6089