ASP.NET Modal Popup wird nur angezeigt, abgeblendet Seite

edit: link to error pic ASP.NET Modal Popup wird nur angezeigt, abgeblendet Seite

Ich bin neu in ASP.NET, kann ich nicht Modal Popup an der Arbeit, ich denke, es mit einschließlich der richtigen Skripte in _Layout zu tun hat, aber nach ausgiebiger Suche kann ich keinen Weg finden, mehr als eine ausgegraute Überlagerung über die Ansicht zu bekommen.

_Layout

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/> 
     @Styles.Render("~/Content/css") 
     @Scripts.Render("~/bundles/modernizr") 
     @Scripts.Render("~/bundles/jquery") 
<script src="~/Scripts/jquery-ui-1.11.4.min.js"></script> 
     @Scripts.Render("~/bundles/jqueryajax") ; 
     @Scripts.Render("~/bundles/bootstrap") 
</head> 
<body> 
<div class="container body-content"> 
@RenderBody() 
@RenderSection("scripts", required: false) 
    </div>

Index

<div id="modal1" class='modal fade in'> 
<div id="modal2"> 
</div> 
</div> 
<input type="button" id="btn" value="Click to popup"/> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("#btn").click(function() { 
     $.ajax({ 
      cache: false, 
      url: '@Url.Action("Modal")', 
      success: function (data) { 
       $("#modal2").html(data); 
       $("#modal1").modal('show'); 
      } 
     }); 
    }); 
});

Quelle

2016-07-10 Daniel Orlan

Das erste, was zu drücken F12 und überprüfen Sie die Konsole Registerkarte für Javascript-Fehler, und auch die Registerkarte Netzwerk für Ajax-Post-Fehler –

Ich bekomme ** kein Element gefunden Fehler **, ich bin mir nicht sicher, ob es ein js Fehler oder Ajax Fehler –

ist es in der Konsole? Ist daneben eine .js-Datei aufgeführt? Ich bin mir nicht sicher, ob es die Absicht ist, aber du hast deine Divs verschachtelt - ist das absichtlich? Ich habe noch nie zuvor solche Mods benutzt. Ich schlage vor, Sie beginnen mit einer einfacheren Implementierung und arbeiten - verwenden Sie einfach ein Div und ein Modal –

(Via Datenattribute):

Aktivieren eines modalen ohne JavaScript zu schreiben. Setzen Sie data-toggle = "modal" auf ein Controller-Element, wie eine Schaltfläche, zusammen mit einem Datenziel = "# foo" oder href = "# foo", um ein bestimmtes Modal als Ziel auszuwählen.

können Sie versuchen, diese

<!-- Button trigger modal --> 

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">show my modal </button> 

     <!-- Modal --> 
     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
     <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body">This is my content</div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
     </div> 
    </div> 
    </div> 
    <!-- /.modal -->

Via JavaScript

Call a modal mit id myModal mit einer einzigen Zeile JavaScript:

$('#myModal').modal(options)

Quelle

2016-07-11 05:32:15 pradeep

Das funktioniert tatsächlich! Ich bin noch nie so nahe gekommen. In Ihrem Codebeispiel haben Sie zwei Schaltflächen eingefügt, offensichtlich werden beide Schaltflächen nicht benötigt.Kann ich nun das gleiche modale Popup mit myModal in einer anderen Ansicht ausführen, die von einem Controller aufgerufen werden kann und mit einem stark typisierten Modell gefüllt wird? –

Gut zu wissen, dass es dir hilft, übrigens dank dir – pradeep

Der HTML-Code für Ihre modale Popup nicht right.Please sieht einen Blick unten, wie ein Bootstrap-modalen Popup sollte aussehen und ein Beispiel für die Anzeige mit jQuery:

<head> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
    <script type="text/javascript"> 
     $(function() { 
      $("#btn").click(function() { 
       var data = "Some test data..."; 
       $(".modal-body").html(data); 
       $("#modal1").modal('show'); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <input type="button" id="btn" value="click" /> 
    <!--Modal start--> 
    <div id="modal1" class="modal fade"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
        <h4 class="modal-title" id="myModalLabel">Modal popup</h4> 
       </div> 
       <div class="modal-body"> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- Modal end--> 
</body>

Ausgang:

Quelle

2016-07-11 04:40:19

ASP.NET Modal Popup wird nur angezeigt, abgeblendet Seite

Antwort

Verwandte Themen