레이어팝업 관련 문의
본문
안녕하세요!!
회원가입 부분을 레이어 팝업 형태로 출력하려고 하는데 제작중 어려운 부분이 있어서 이렇게 문의 드립니다.
자료를 찾아보면서 수정도 해보고 했는데 초보자라 너무 어렵네요..ㅠㅠ
사용된 코드는 아래와 같습니다.
popup.js
function sh_pop_layers() {
$.ajax({
url: g5_url+"/wm_page/pop_layers/member.php", // 호출 대상
type: 'POST',
data: {"stx": 'stx'}, // 아래 data 값 전달 방식 POST , GET 방식있음
success: function(data){
$("#sh_pop_layers").after(data);
},
dataType: 'html' // html 태그로 받고 그걸 뿌리는 것이기 때문에 html 방식 JONS, TEXT 방식 등이 있음.
});
}
member.php
<?php
include_once('./_common.php');
?>
<link rel="stylesheet" href="/wm_page/pop_layers/style.css?ver=220707">
<!-- 팝업창 띄울때 뒷배경처리 { -->
<div id="sh_pop_layers">
<a onClick="sh_pop_layers('close')" style="cursor:pointer"><div id="divpop_layers_back"></div></a>
</div>
<!-- } 팝업창 띄울때 뒷배경처리 -->
<script src="<?php echo G5_JS_URL ?>/jquery.register_form.js"></script>
<div id="divpop_member">
<div class="divpop_btn_close" onClick="sh_view_pop_layers('close')">닫기</div>
<div class="divpop_zone">
<h3>회원가입</h3>
<form id="fpopmember" name="fpopmember" action="/wm_page/pop_layers/member_update.php" onsubmit="return fpopmember_submit(this);" method="post" enctype="multipart/form-data" autocomplete="off">
<dl>
<dt><label for="mb_id">아이디(ID)</label></dt>
<dd><input class="wide" type="text" name="mb_id" id="reg_mb_id" value="" />
<span id="msg_mb_id"></span></dd>
</dl>
<dl>
<dt><label for="mb_password">비밀번호(PW)</label></dt>
<dd><input class="wide" type="password" name="mb_password" id="mb_password" value="" /></dd>
</dl>
<dl>
<dt><label for="mb_name">이름</label></dt>
<dd><input class="wide" type="text" name="mb_name" id="mb_name" value="" /></dd></span>
</dl>
<dl>
<dt><label for="mb_nick">업체명</label></dt>
<dd><input class="wide" type="text" name="mb_nick" id="mb_nick" value="" /></dd></span>
</dl>
<dl>
<dt><label for="mb_hp">핸드폰</label></dt>
<dd><input class="wide" type="text" maxlength="12" name="mb_hp" id="mb_hp" value="" onkeyup='onlyNumber(this);' /></dd></span>
</dl>
<dl>
<dt><label for="mb_tel">연락처</label></dt>
<dd><input class="wide" type="text" maxlength="12" name="mb_tel" id="mb_tel" value="" onkeyup='onlyNumber(this);' /></dd></span>
</dl>
</dl>
<ul class="agree_area">
<li>
<span onclick="window.open('/wm_page/wm_stipulation.php', 'window', 'width=600; height=830; left=150; top=0; scrollbars=no')">회원가입약관</span>
<span><label>동의 <input type="checkbox" name="agree" value="1" id="agree11"></label></span>
<div class="text_area"><textarea readonly>
헤더부분에 링크 부분
<li class="n3"><button onclick="javascrip:sh_pop_layers();">회원가입</button></li>
회원가입을 클릭시 popup.js를 거쳐서 member.php 파일을 불러와야 하는데 링크를 클릭을 해도 아무런 반응이 없습니다..
어떻게 수정을 해야 정상적으로 출력이 가능할까요?
몇일째 헤메고 있는 상황이라 고수님들의 도움 부탁드리겠습니다.
오늘도 좋은 하루 되세요~
답변 4
function sh_pop_layers() {
alert("a");
$.ajax({
url: g5_url+"/wm_page/pop_layers/member.php", // 호출 대상
type: "POST",
data: {"stx" : "stx"},
dataType: "html",
success: function(data){
alert(data);
//$("#sh_pop_layers").after(data);
},
error : function(error) {
alert("Error!");
console.log(error);
}
});
}
이런식으로 어떻게 값이 나오는지 확인해 보셔야 할 듯 해요
안녕하세요! @개노미 님
답변 감사드립니다. ~ 알려주신데로 검토해보겠습니다.
링크를 클릭했을때 아래와 같은 메세지가 출력됩니다..
즉 member.php의 일부내용이 출력되네요
팝업은 뜨지 않는 상태입니다.
<link rel="stylesheet" href="/wm_page/pop_layers/style.css?ver=220707">
<div id="sh_pop_layers">
<a onClick="sh_view_pop_layers('close')" style="cursor:pointer"><div id="divpop_layers_back"></div></a>
</div>
<script src="/js/jquery.register_form.js"></script>
<div id="divpop_member">
<div class="divpop_btn_close" onClick="sh_view_pop_layers('close')">닫기</div>
<div class="divpop_zone">
<h3>회원가입</h3>
<form id="fpopmember" name="fpopmember" action="/wm_page/pop_layers/member_update.php" onsubmit="return fpopmember_submit(this);" method="post" enctype="multipart/form-data" autocomplete="off">
<dl>
<dt><label for="mb_id">아이디(ID)</label></dt>
<dd><input class="wide" type="text" name="mb_id" id="reg_mb_id" value="" />
<span id="msg_mb_id"></span></dd>
</dl>
<dl>
//$("#sh_pop_layers").after(data);
위 코드에서 //을 제거해야 합니다.
안녕하세요 @개노미 님 알려주신대로 주석제거하고 이리저리 수정해 가면서 테스트를 해봤는데
역시 팝업창은 뜨지 않네요.ㅠㅠ
최종적으로 테스트 한 소스입니다. 시간이 되신다면 검토 부탁드리겠습니다.
function sh_pop_layers() {
$.ajax({
url: g5_url+"/wm_page/pop_layers/member.php", // 호출 대상
type: "POST",
data: {"stx" : "stx"},
dataType: "html",
success: function(data){
//alert(data);
$("#sh_pop_layers").after(data);
},
});
}
console.log(data)를 이용해서 data가 어디까지 찍히는지 확인해 보신 후에
$("#sh_pop_layers").after이 아닌 $("#sh_pop_layers").html(data) 이런식으로 한번 찍어보세요
data값이 잘 찍히는데 팝업이 동작하지 않는다면 팝업 동작방식을 바꿔야 할 수도 있어요
console.log(data) 를 사용해서 메세지 확인결과 member.php 내용은 전부 출력이 되는데요~
레이어 팝업창이 작동을 하지 않고 있습니다.
초보자라 너무 어렵네요..ㅠㅠ 조언해 주셔서 감사합니다.
일단 소스는 살펴보지는 않았는데 맨 아래
javascrip:sh_pop_layers() 오타도 있으시고 sh_pop_layers() 로만 하셔도 됩니다.
안녕하세요 @블랙캣77 님
답변주셔서 감사합니다. sh_pop_layers() 해도 된다는 얘기가 어떤얘기이신지요?
설명좀 부탁드려도 될까요?
개발자도구에서 스크립트 에러 찍히는게 있는지 먼저 살펴 보셔야 할것 같네요.
다른 스크립트에서 에러가 났을경우 실행되지 않을수도 있습니다.
에러가 없다면 sh_pop_layers() 함수 내부에서 console.log 를 찍어서 클릭시 잘 호출되는지
한번 체크해 보시고 ajax 데이터 넘어오는것도 개발자도구에서 확인할수 있습니다.
모르시겠으면 ajax success 함수 내부에서도 데이터를 잘 받고 있는지 console.log로 찍어보시고
ajax error 함수 만들어서 에러코드가 있다면 뭔지 체크해 보시고
이렇게 순차적으로 확인해 보시면 될것 같습니다.
안녕하세요 @썽피리 님 답변주셔서 감사합니다.
일단 스크립트에서는 에러가 표시되지 않습니다. 그 이외에 알려주신 부분들이 초보자라 이해가 잘 안가는데 자세히 설명좀 해주실 수 있으실까요?
<li class="n3"><button onclick="javascript:sh_pop_layers();">회원가입</button></li>
여기 오타가 있는데 확인 한번 해보셔요
안녕하세요 @NDWEB 님 우선 답변주셔서 감사합니다
지적해 주신부분은 질문글을 올리면서 오타가 있었네요..ㅠㅠ
<li class="n3"><button onclick="javascript:sh_pop_layers();">회원가입</button></li>
정상적으로 적용이 되어 있는상태입니다.
혹시 어디가 문제인지 도움좀 부탁 드려봅니다.