如何添加图像，重叠的引导模式？

Question

我想添加关闭按钮，即重叠的 Bootstrap 模式。

这是我所拥有的：

这是我想做的事情：

这是我的 HTML：

 <div class="sign_up_header">
 <a class="close" data-dismiss="modal">
     <%= image_tag("/images/close_btn.png") %>
 </a>
 </div>

和CSS（尝试添加z-index并添加top：-5px，但它隐藏在modal后面）：

  .close{
      display: block;
      position: absolute;
      right:0px;
      top:0px
     }
  #sign_up{
border: 0;
width: 450px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding-bottom: 10px;
}

.sign_up_header{
padding-top:10px;
padding-left: 30px;
 }

来自 Bootstrap 模态的 CSS：

              .modal {
   position: fixed;
   top: 50%;
   left: 50%;
   z-index: 1050;
   width: 560px;
   margin: -250px 0 0 -280px;
   overflow: auto;
    background-color: #ffffff;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
      border-radius: 6px;
 -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
 -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
      box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -webkit-background-clip: padding-box;
 -moz-background-clip: padding-box;
      background-clip: padding-box;
     }

正如我在一些文章中发现的那样，我需要将 position:absolute 添加到模态中，但如果我这样做，它将不会居中。

我该怎么做？

Answer 1

应用@James 解决方案后，您必须将.modal 属性overflow: auto 更改为overflow: visible 以让按钮离开模态，但这会导致意外行为。

Answer 2

要实现关闭按钮的重叠效果，这样做：

.close {
  display: block;
  position: absolute;
  right:-8px;
  top:-8px
 }

编辑 1

.modal {
   position: fixed;
   top: 50%;
   left: 50%;
   z-index: 1050;
   width: 560px;
   margin: -250px 0 0 -280px;
   overflow: visible;
   background-color: #ffffff;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
   -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
   box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding-box;
   background-clip: padding-box;
 }