1

我想添加关闭按钮，即重叠的 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 添加到模态中，但如果我这样做，它将不会居中。

我怎么能做到这一点？

4

2 回答 2

2

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

于 2012-08-28T10:04:11.173 回答
1

要实现关闭按钮的重叠效果，请执行以下操作：

.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;
 }
于 2012-08-28T09:56:39.520 回答