jquery - 在弹出框中添加关闭按钮

Question

这是我的弹出窗口的简单示例。我想使用 css 或 jquery 在弹出窗口的右上角添加关闭按钮。

fiddle :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>

有什么帮助吗？

Answer 1

像下面这样更新您的 HTML 部分。

 <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

 #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;
}

最后，您需要为关闭按钮功能添加 jquery。

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

FIDDLE DEMO