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を追加しようとしましたが、モーダルの背後に隠れています）：

  .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 に答える