モデルのASP.NET MVC 4のブートストラップモーダル

Question

私は.NETのMVC 4とブートストラップにwebappを持っています。私はモデルからいくつかのデータを持つモーダルを表示する必要があります。モデルにマイページが入力されています。問題は次のとおりです。 モーダルのdivをページに配置すると（このページはレイアウトを使用します）、divはモーダルダイアログとして開きますが、暗く見えてクリックできません。私がメインレイアウトにモーダルdivを置くと、モーダルはうまく見えますが、私のレイアウトはモデル型ではないので、モーダルdiv内では使用できません。 1つのオプションは、私のレイアウトをモデルタイプにすることで、もう1つのオプションは私のdivを私のページに保持するかもしれませんが、私のモーダルdivを（z-indexのように）すべての前に置くプロパティを使用します。私はこの最後の試みを試みたが成功しなかった。

私のページのコードです。

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
<div id="myModal" class="modal fade" role="dialog" style="z-index: 150;"> 
    <div class="modal-dialog" style="z-index: 151;"> 
     <div class="modal-content" style="z-index: 152;"> 
      <div class="modal-header" style="z-index: 153;"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Modal Header</h4> 
      </div> 
      <div class="modal-body" style="z-index: 153;"> 
       <label>Hello @Model.UserName</label> 
      </div> 
      <div class="modal-footer" style="z-index: 153;"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

ブートストラップページの例にあるものをお試しください。私は問題なく多くを使用します。

`<div class="modal fade"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h5 class="modal-title">Modal title</h5> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     </div> 
     <div class="modal-body"> 
     <p>Modal body text goes here.</p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
</div>` 

Answer 2

だけidがmyModal（少なくとも最初の問題）であることを<div>からstyle属性を削除します。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
 

 

 
<div id="myModal" class="modal fade" role="dialog" style="z-index: 150;"> 
 
    <div class="modal-dialog" style="z-index: 151;"> 
 
     <div class="modal-content" style="z-index: 152;"> 
 
      <div class="modal-header" style="z-index: 153;"> 
 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
       <h4 class="modal-title">Modal Header</h4> 
 
      </div> 
 
      <div class="modal-body" style="z-index: 153;"> 
 
       <label>Hello @Model.UserName</label> 
 
      </div> 
 
      <div class="modal-footer" style="z-index: 153;"> 
 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div id="myModal2" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 
     <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"> 
 
       <label>Hello @Model.UserName</label> 
 
      </div> 
 
      <div class="modal-footer"> 
 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">Open Modal without Style attribute</button> 
 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal with Style attribute</button>

Answer 3

私は私のdivモーダルで 属性データ、背景= "false" に使用して（レイアウトに移動していない）私のページに私のdivを保ちました。これで、 モーダルはOKです。

すべてのdivからすべてのz-index属性を削除しました。