팝업 상자에 닫기 버튼 추가

Question

다음은 내 팝업 예입니다. CSS 또는 jquery를 사용하여 팝업 창의 오른쪽 상단에 닫기 버튼을 추가하고 싶습니다.

바이올린 : http://jsfiddle.net/karimkhan/EYAY2/

<a href="#popup" rel="popup">open</a> 

<div id="popup" class="popup"> <a href="#new" rel="popup" onClick="rewrite('popup', 'blah')">Rewrite</a> 

</div> 
<div id="new" class="popup"> 
    <textarea id="new-text"></textarea> 
</div> 
<a href="#new" rel="popup" onClick="rewrite('popup', 'blah')">Rewrite</a> 

<div id="new2" class="popup">NEW 
    <textarea id="new-text2">text area 2</textarea> 
</div> 

어떤 도움? HTML 코드에서

Answer 1

아래와 같이 HTML 부분을 업데이트하십시오.

#lean_overlay { 
position: fixed; 
z-index:100; 
top: 0px; 
left: 0px; 
height:100%; 
width:100%; 
background: #333; 
display: none; 
} 
.popup { 
background:#fff; 
width:300px; 
display:none; 
min-height:150px; 
} 

<a href="#popup" rel="popup">open</a> 

<div id="popup" class="popup"> <a href="#new" rel="popup" onClick="rewrite('popup', 'blah')">Rewrite</a> 
<div style="position:absolute; top:0; right:0;"><button class="clsbtn">close</button>  </div> 
</div> 
<div id="new" class="popup"> 
<div style="position:absolute; top:0; right:0;"><button class="clsbtn">close</button> </div> 
<textarea id="new-text"></textarea> 
</div> 
<a href="#new" rel="popup" onClick="rewrite('popup', 'blah')">Rewrite</a> 

<div id="new2" class="popup">NEW 
<textarea id="new-text2">text area 2</textarea> 
</div> 

CSS 마지막으로 당신은 닫기 버튼 기능을 jQuery를 추가해야합니다.

$(document).ready(function(){ 
    $(".clsbtn").on("click",function(){ 
    $(".popup, #lean_overlay").css("display","none"); 
    }); 
}); 

FIDDLE DEMO

Answer 2

추가 버튼 태그는 CSS

#button { 
position: fixed; 
top: 0; 
right: 0; 
} 

그것은 지금 일 것이다 코드 다음

<div id="popup" class="popup"> 
<input type="button" id="button" value="close" /> 
<a href="#new" rel="popup" onClick="rewrite('popup', 'blah')">Rewrite</a> 
</div> 

추가 다음과 같이.