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>

任何帮助？

Answer 1

在HTML代码中添加按钮标记，如下所示

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

在CSS中添加以下代码

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

它现在正在工作。

Answer 2

更新您的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

在弹出框中添加关闭按钮

2 个答案: