Jqueryモーダルプラグインx閉じるボタンの一部が隠されています

Question

私はjquery modal pluginを試しています。

私はcssとjsをリンクしていますが、その中にテキストを含むdivがあり、そのdivを開いてモーダルを表示するリンクがあります。しかし、モーダルの右上隅にあるxボタンは途切れています。なぜどんなアイデア？

私もブートストラップを使用しています。私もこの出来事のJSフィドルhere例を持って

<div class="container"> 
    <a class="content-delete" href="#overlay" rel="modal:open"> delete</a> 
    <div id="overlay" style="display:none;"> 
     <p>Are you sure you want to delete this content?<a href="#" rel="modal:close">Close</a> or press ESC</p> 
    </div> 
</div> 

：

は、ここに私のhtmlです。

Answer 1

表示されているCSSは、上と右の-veオフセットを持つ近接モダール要素を設定します。

.modal a.close-modal { 
    position: absolute; 
    top: -12.5px; 
    right: -12.5px; 

あなたは+

Answer 2

にXボタンの位置をこの問題を解決するためにVEの何かにそれらを設定することができますがcss calcを使用して変更し、更新することができます：

これは.modalの固定サイズを意味します：あなたはショーの方法でモーダル自体を示すときにこの計算を行うことができ、固定モーダルをしたくない場合は代わりに

width: 500px; 
height: 90px; 

、（私は仮定します）。

このように閉じるボタンが表示されます：

.modal a.close-modal { 
     position: fixed; 
     top: calc((100% - 90px - 12.5px)/2); 
     right: calc((100% - 500px - 12.5px)/2); 
     display: block; 
     width: 30px; 
     height: 30px; 
     text-indent: -9999px; 
     background: url("data:image/png;base64,iVBORw...") no-repeat 0 0; 
} 

更新fiddle