モーダルボディの内側にモーダルボタンを表示させるにはどうすればよいですか？

フッターではなくモーダルボディ内にモーダルボタン（「OK」、「DISMISS」など）が表示されるようにするにはどうすればよいですか？写真を背景に設定しているため、この写真の上にボタンが浮かびます。私はそれの上に置かれた背景とコントロールと、同じセクションのボタンを表示するには、同じことを使用しているモーダルボディの内側にモーダルボタンを表示させるにはどうすればよいですか？

<div class="container"> 
     <div class="modal1 fade" 
        id="XXX" 
        tabindex="-1" 
        aria-labelledby="XXX" 
        role="dialog" 
        aria-hidden="true"> 
     <div class="modal_wrapper1"> 
     <div class="modal-dialog1"> 
     <div class="modal-body"> 
     <img class="img-responsive" src="Ximage" alt="image" /> 
     <a href="" target="_blank" class="btn">button!</a> 
     <a href="" type="button" class="btn" data-dismiss="modal">Close</a> 
     </div> 
     </div> 
     </div> 
     </div> 
</div> 

.modal1{ 
     width: 100%; 
     position: fixed; 
     text-align: center; 
     margin: 0px auto; top: 0px; 
     left: 0px; bottom: 0px; right: 0px; 
     z-index: 1050; 
     } 
.modal_wrapper1{ 
     display: table; 
     overflow: auto; 
     overflow-y: scroll; 
     height: 100%; 
     -webkit-overflow-scrolling: touch; outline: 0; 
     text-align: center; 
     margin: 0px auto; 
     } 
.modal-dialog1{ 
     margin-top: 0px; 
     display: table-cell; 
     vertical-align: middle; 
     margin: 0px 20px; 
     }

出典

2016-04-22 Jim

あなたは写真上のボタンをしたいと言っている場合は、あなたがする必要があるだろう、すべてはあなたの '' タグの上に '' タグを上に移動です。しかし、そのような小さなコードスニペットで言うことは難しい。 – buschschwick

、あなたはあなたのページにこれに類似してみてください。その私のためにうまく動作します。本文を変更する代わりに、セクションに適用する背景を変更することができます。

<body style="background-image: url('../../abc.jpg'); align-content:center;"> 
     <header style="height:200px"> 
     <section> 
      <div class="container"> 
       <div class="row" > 
        <div class="col-lg-5"> 
        </div> 
        <div class="col-lg-2 text-center"> 
         <div id="login" name="loginForm" > 
          <input ........ /><br /><br /> 
          <input type="submit" class="btn btn-success" value="Continue" /> 
         </form> 
        </div> 
        <div class="col-lg-5"> 
        </div> 
       </div> 
      </div> 
     </section> 
    </body>

あなたはあまりそれを修正するのではなく、デフォルトのCSSを使用した場合、画面が異なる解像度を持っている場合、それはコントロールの配置に影響するとして、それは、良くなるよりも、あなたは、ブートストラップを使用している場合。

出典

2016-04-22 06:36:58 sumngh

素敵で偉大な作品:) –

<img>をモーダルボディdivに追加する代わりに、CSSの背景イメージとして適用してください。

.modal1 .modal-body { 
    background:url(Ximage) no-repeat; 
    background-size:contain; // or auto or cover, whichever works best. 
}

出典

2016-04-22 06:37:36 partypete25

モーダルボディの内側にモーダルボタンを表示させるにはどうすればよいですか？

答えて

関連する問題