제이쿼리 질문좀드리겠습니다. 채택완료
잘부탁합니닿
7년 전
조회 4,141
안녕하세요 질문좀 드리겠습니다.
아래소스처럼 레이어 팝업을 이용중입니다
그런데 라디오버튼을 클릭을하면 레이어창이 닫아지면 좋겠는데 답변좀 주시면 감사하겠습니다.,
아그리고 부모창에 클릭한라디오버튼 이름만 나오면 좋겠습니다
부탁좀드리겠습니다.
</p>
<p>div class="setDiv">
<div class="mask"></div>
<div class="window"></p>
<p><header id="hd">
<div id="hd_wrapper">
<div id="logo">
모델 선택
</div>
<div id="gnb_open" class="hd_opener" >
<button class="close" type="submit"><img src="/img/close.png" style="width:25px;"></button>
</div>
</div>
</header></p>
<p> <input type="radio" name="wr_10" value="갤럭시S9 Plus.">갤럭시S9+Plus
<input type="radio" name="wr_10" value="갤럭시S9.">갤럭시S9
<input type="radio" name="wr_10" value="갤럭시S8.">갤럭시S8</p>
<p>
</p>
<p> </div>
</div></p>
<p> </p>
<p>
<style>
.setDiv {
text-align: center;
}
.mask {
position:absolute;
left:0;
top:0;
z-index:9999;
background-color:#000;
display:none;
}
.window {
display: none;
background-color: #ffffff;
width: 100%;
height: 100%; z-index:99999;
}
</style>
</head>
<body>
<script src="<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>" target="_blank" rel="noopener noreferrer">https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script></a>
<script type="text/javascript">
function wrapWindowByMask(){
// 화면의 높이와 너비를 변수로 만듭니다.
var maskHeight = $(document).height();
var maskWidth = $(window).width();
// 마스크의 높이와 너비를 화면의 높이와 너비 변수로 설정합니다.
$('.mask').css({'width':maskWidth,'height':maskHeight});
// fade 애니메이션 : 1초 동안 검게 됐다가 80%의 불투명으로 변합니다.
$('.mask').fadeIn(1000);
$('.mask').fadeTo("slow",0.8);
// 레이어 팝업을 가운데로 띄우기 위해 화면의 높이와 너비의 가운데 값과 스크롤 값을 더하여 변수로 만듭니다.
var left = ( $(window).scrollLeft() + ( $(window).width() - $('.window').width()) / 2 );
var top = ( $(window).scrollTop() + ( $(window).height() - $('.window').height()) / 2 );
// css 스타일을 변경합니다.
$('.window').css({'left':left,'top':top, 'position':'absolute'});
// 레이어 팝업을 띄웁니다.
$('.window').show();
}
$(document).ready(function(){
// showMask를 클릭시 작동하며 검은 마스크 배경과 레이어 팝업을 띄웁니다.
$('.showMask').click(function(e){
// preventDefault는 href의 링크 기본 행동을 막는 기능입니다.
e.preventDefault();
wrapWindowByMask();
});
// 닫기(close)를 눌렀을 때 작동합니다.
$('.window .close').click(function (e) {
e.preventDefault();
$('.mask, .window').hide();
});
// 뒤 검은 마스크를 클릭시에도 모두 제거하도록 처리합니다.
$('.mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script></p>
<p> </p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
답변을 작성하려면 로그인이 필요합니다.
로그인