Bootstrap Modal mit Modell ASP.NET MVC 4

Question

Ich habe eine Webapp in .Net MVC 4 und Bootstrap. Ich muss ein Modal mit einigen Daten vom Modell zeigen. Meine Seite wird mit dem Modell eingegeben. Das Problem ist das: Wenn ich das modale Div auf meiner Seite (diese Seite verwendet ein Layout), das Div öffnet sich als modales Dialogfeld, aber sieht verdunkelt und kann nicht angeklickt werden. Wenn ich das modale Div im Hauptlayout anlege, sieht das Modal gut aus, aber ich kann das Modell nicht im Modal Div verwenden, weil mein Layout nicht modelliert ist. Eine Option wäre, mein Layout zu modellieren, und die andere Option könnte mein div auf meiner Seite behalten, aber eine Eigenschaft verwenden, die mein modales div vor alle stellt (wie z-index). Ich habe das letzte Mal versucht, aber ohne Erfolg.

Der Code auf meiner Seite.

<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

Versuchen Sie es mit dem auf den Beispielen in der Bootstrap-Seite. Ich benutze sie sehr oft ohne Probleme.

`<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

entfernen Gerade style Attribut aus dem <div> dass idmyModal (zumindest nur erste Ausgabe) ist.

<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

hielt ich meine div in meiner Seite (nicht auf dem Layout verschoben) durch mit Attributdaten-Hintergrund = "false" in meinem div modal. Mit diesem sieht das Modal gut aus.

Und ich entfernt alle Z-Index von allen divs Attributen.