ASP.NET Modal Popup affiche uniquement grisées la page

modifier: link to error pic ASP.NET Modal Popup affiche uniquement grisées la page

Je suis nouveau à ASP.NET, je ne peux pas Modal Popup à travailler, je pense qu'il a à voir avec notamment les bons scripts dans _Layout, mais après une recherche approfondie, je ne peux pas trouver un moyen d'obtenir plus d'une superposition grisée sur la vue.

_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'); 
      } 
     }); 
    }); 
});

Source

2016-07-10 Daniel Orlan

La première chose à Strictement appuyez sur F12 et inspecter l'onglet de la console pour les erreurs javascript, ainsi que l'onglet réseau pour les erreurs de publication ajax –

Je reçois ** aucun élément trouvé erreur **, je ne suis pas sûr si c'est une erreur js ou une erreur ajax –

est-il dans la console? At-il un fichier .js répertorié à côté de lui? Je ne suis pas sûr si c'est l'intention mais vous avez imbriqués vos divs - est-ce exprès? Je n'ai jamais utilisé jquery ui modaux comme ça avant. Je vous suggère de commencer par une implémentation plus simple et de travailler - il suffit d'utiliser un div et un modal –

(Via attributs de données):

Activer un modal sans écrire JavaScript. Définissez data-toggle = "modal" sur un élément de contrôleur, comme un bouton, avec un data-target = "# foo" ou href = "# foo" pour cibler un modal spécifique pour basculer.

Vous pouvez essayer cette

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

Appel modal avec id myModal avec une seule ligne de JavaScript:

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

Source

2016-07-11 05:32:15 pradeep

Cela fonctionne réellement! Je n'ai jamais été aussi proche. Dans votre exemple de code, vous avez inclus deux boutons, évidemment les deux boutons ne sont pas nécessaires.Maintenant, puis-je accomplir le même popup modal, avec myModal dans une vue différente qui peut être appelée à partir d'un contrôleur, et peuplé avec un modèle fortement typé? –

Bon à savoir cela vous aide, d'ailleurs grâce à vous – pradeep

Le code HTML pour votre pop-up modal ne semble pas right.Please Regardez ci-dessous comment un popup modal bootstrap devrait regarder et un exemple de l'affichage en utilisant 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>

Sortie:

Source

2016-07-11 04:40:19

ASP.NET Modal Popup affiche uniquement grisées la page

Répondre

Questions connexes