ブートストラップモーダルは開いていますが、灰色の背景に残り、モーダルを閉じることができません。

Question

ブートストラップのモーダルクラスを使用してボタンをクリックするとモーダルが表示されます。コードは機能しますが、ボタンがクリックされてモーダルが表示されますが、画面全体がグレー表示され、モーダルをクリックすることはできません。私はそれが灰色の背景にあるので、モーダルを閉じることはできません。あなたは下の画像で見ることができます：

<!-- Modal --> 
<div id="myModal" class="modal fade" style="z-index: 9999;" role="dialog"> 
    <div class="modal-dialog"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Modal Header</h4> 
      </div> 
      <div class="modal-body"> 
       <p>Some text in the modal.</p> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 
<section id="profileMain"> 
    <form class="formoid-solid-dark" 
     style="background-color: #FFFFFF; font-size: 14px; font-family: 'Trebuchet MS','Roboto', Arial, Helvetica, sans-serif; color: #34495E; max-width: 800px; min-width: 150px" 
     method="post" action=""> 
     <div class="title"> 
      <h2>Intake Request</h2> 
     </div> 
     <div id="mainFormTabs" class="container"> 
      <ul class="nav nav-pills"> 
       <li><a data-toggle="tab" href="#tabCM">Comments</a></li> 
      </ul> 
      <div class="container" style="border:1px solid #34495E; border-radius: 0px 4px 4px 4px;"> 
       <div class="tab-content clearfix" style="padding: 10px;"> 
        <div id="tabCM" class="tab-pane fade"> 
         <!-- Trigger the modal with a button --> 
         <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
        </div> 
       </div> 
      </div> 
     </div> 
    </form> 
</section> 

私が、私は体外にモーダルのdivを移動した、モーダルのためのzインデックスを調整しようとしている：ここで

コードです一番上、そしてHTMLフォームの一番下にありますが、これらのどれもうまくいきませんでした。

この問題を解決する方法はありますか？

Answer 1

私は戻ってbodyタグの外側にあるmodal divを移動しましたが、現在は動作しています。

</body> 
<!-- Modal --> 
<div id="myModal" class="modal fade" style="z-index: 9999;" role="dialog"> 
    <div class="modal-dialog"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Modal Header</h4> 
      </div> 
      <div class="modal-body"> 
       <p>Some text in the modal.</p> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 
</html>