창 크기를 조정할 때 "닫기"버튼이 움직이지 않게하십시오.

Question

화면을 클릭하지 말고 닫기 버튼을 클릭하고 싶은 링크를 클릭하면 나타나는 팝업 창이 있습니다. 화면의 크기를 조정할 때 여전히 멈추지 않는다는 점을 제외하고는 닫기 버튼을 구현했습니다. 나는 팝업 창의 오른쪽 상단에두기를 원합니다.

나는 내부와 외부는 div하지만 내부를 이동하는 경우, 그것은 내가 첨부했습니다

"떨어져 절반과 절반"을 배치하려고하면 차단 얻을 것이다 그것을 이동하려고했습니다 내가 그것을 얻으려고하는 곳의 스크린 샷. http://imgur.com/DbZljrJ.jpg

<p><a class="show-popup" href="#">TBLO (Tibial Plateau Leveling Osteotomy)</a></p> 

<div class="overlay-bg2"> 
    <div class="close-btn-wrapper"> 
    <button class="close-btn2"><strong>X</strong></button> 
    </div> 
    <div class="overlay-content2"> 

<p>CONTENT ENTERED HERE</p> 
<button class="close-btn">Close</button> 
</div> 
</div> 

및 CSS

.overlay-bg2 { 
z-index: 1801; 
display: none; 
position: fixed; 
top: 0; 
left: 0; 
height:100%; 
width: 100%; 
cursor: pointer; 
background: #000; /* fallback */ 
background: rgba(0,0,0,0.75); 
} 

.overlay-content2 { 
z-index: 1800; 
background: #fff; 
padding: 1%; 
width: 700px; 
height: 200px; 
overflow:auto; 
position: relative; 
top: 15%; 
left: 30%; 
margin: 0 0 0 -10%; /* add negative left margin for half the width to center the div */ 
cursor: default; 
border-radius: 4px; 
box-shadow: 0 0 5px rgba(0,0,0,0.9); 
} 

.close-btn-wrapper { 
    position:relative; 
    width: 400px; 
    left:25%; 
    z-index: 2001; 

    } 

.close-btn2 { 
cursor: pointer; 
border: 1px solid #333; 
background: #a9e7f9; /* fallback */ 
background: -moz-linear-gradient(top, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9e7f9),   
color-stop(4%,#77d3ef), color-stop(100%,#05abe0)); 
background: -webkit-linear-gradient(top, #a9e7f9 0%,#77d3ef 4%,#05abe0 100%); 
background: -o-linear-gradient(top, #a9e7f9 0%,#77d3ef 4%,#05abe0 100%); 
background: -ms-linear-gradient(top, #a9e7f9 0%,#77d3ef 4%,#05abe0 100%); 
background: linear-gradient(to bottom, #a9e7f9 0%,#77d3ef 4%,#05abe0 100%); 
border-radius: 4px; 
box-shadow: 0 0 4px rgba(0,0,0,0.3); 
position: absolute; 
top:30px; 
right: 180px; 
z-index: 2000; 
padding: 1% 1%; 
} 

.close-btn2:hover { 
background: #05abe0; 
}   

및 JS (이것은 중요한 경우)

$(document).ready(function(){ 
// show popup when you click on the link 

$('.show-popup').click(function(event){ 
event.preventDefault(); // disable normal link function so that it doesn't refresh the page 
$(this).parent().next().show(); //display your popup 
}); 

// hide popup when user clicks on close button 
$('.close-btn').click(function(){ 
$('.overlay-bg2').hide(); // hide the overlay 
}); 

// hides the popup if user clicks anywhere outside the container 
$('.overlay-bg2').click(function(){ 
    $('.overlay-bg2').hide(); 
}) 
// prevents the overlay from closing if user clicks inside the popup overlay 
$('.overlay-content2').click(function(){ 
    return false; 
}); 

}); 

Answer 1

CSS는 아래를보십시오. 스타일을 약간 변경하고 모든 변경 사항을 주석 처리했습니다. 필요에 따라 값을 변경하십시오. 입력에 대한

.overlay-bg2 { 
    z-index: 1801; 
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    height:100%; 
    width: 100%; 
    cursor: pointer; 
    background: #000; /* fallback */ 
    background: rgba(0,0,0,0.75); 
} 

.overlay-content2 { 
    z-index: 1800; 
    background: #fff; 
    padding: 1%; 
    /* width: 700px; */ /* Removed this and added below code to make the content restrict within the visible area of fiddle.*/ 
    width:50%; 
    height: 200px; 
    overflow:auto; 
    position: relative; 
    top: 15%; 
    /* left: 30%; */ /* Remove this line */ 
    /* margin: 0 0 0 -10%; */ /* add negative left margin for half the width to center the div */ /* Removed this line and added below to position it in center */ 
    margin:0 auto; 
    cursor: default; 
    border-radius: 4px; 
    box-shadow: 0 0 5px rgba(0,0,0,0.9); 
} 

.close-btn-wrapper { 
    position:relative; 
    /* width: 400px; */ /* Removed this line and added below */ 
    width: 50%; /* Make the width of this block same as the width of content block */ 
    /* left:25%; */ /* Remove this line */ 
    top: 15%; /* Add this value same as the top value of content block */ 
    z-index: 2001; 
    margin: 0 auto; 
    padding:1%; /* Added this line */ 
} 

.close-btn2 { 
    cursor: pointer; 
    border: 1px solid #333; 
    background: #a9e7f9; /* fallback */ 
    background: -moz-linear-gradient(top, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9e7f9),   
color-stop(4%,#77d3ef), color-stop(100%,#05abe0)); 
    background: -webkit-linear-gradient(top, #a9e7f9 0%,#77d3ef 4%,#05abe0 100%); 
    background: -o-linear-gradient(top, #a9e7f9 0%,#77d3ef 4%,#05abe0 100%); 
    background: -ms-linear-gradient(top, #a9e7f9 0%,#77d3ef 4%,#05abe0 100%); 
    background: linear-gradient(to bottom, #a9e7f9 0%,#77d3ef 4%,#05abe0 100%); 
    border-radius: 4px; 
    box-shadow: 0 0 4px rgba(0,0,0,0.3); 
    position: absolute; 
    /* top:30px; */ /* Changed the value to below */ 
    top:0; 
    /* right: 180px; */ /* Changed the value to below */ 
    right: -8px; 
    z-index: 2000; 
    padding: 1%; 
    margin:0; 
} 

.close-btn2:hover { 
    background: #05abe0; 
}