2009-08-05 4 views
0

J'ai essayé d'obtenir des fenêtres modales qui fonctionnent sur un nouveau site depuis un certain temps maintenant. J'ai d'abord essayé jqmodal et n'ai eu aucun problème à afficher les modaux, mais les boutons de fermeture n'ont jamais fonctionné - ou du moins ils ont fonctionné sur certaines pages mais pas sur d'autres. J'ai mis beaucoup d'efforts dans le débogage et je n'ai pas pu trouver le problème.jquery fenêtres modales - la fermeture des frustrations avec greybox et jqmodal

J'ai récemment essayé greybox pour voir si j'avais plus de chance, mais j'ai rencontré un problème très similaire. Le bouton de fermeture en haut à droite fonctionne bien, mais je ne peux pas faire un bouton dans le modal qui agit comme un proche. J'ai essayé:

onclick="parent.parent.GB_hide();" 

et des variantes similaires, mais ils se contentent de charger tout ce que href est défini dans le modal. Cependant, si je fais:

onclick="top.window.location.href='www.google.com'; parent.parent.GB_hide();" 

ce fermera le modal et ouvrir Google, comme prévu. Ce que je ne peux pas comprendre, c'est pourquoi je ne peux pas faire un bouton qui va tout simplement le fermer. J'ai l'impression qu'il me manque quelque chose de fondamental puisque je continue de rencontrer des problèmes similaires. Incidemment, le site est écrit en ASP.NET MVC avec jquery et je suis d'abord tester sur Firefox en ce moment.

Je réalise également que cette question est un peu vague, donc j'apprécie toutes les pensées et peut fournir plus d'informations si demandé. Merci d'avance!

Modifier: Je ne sais toujours pas comment procéder. Les idées de Nick ont ​​été bien prises mais je ne vois aucune erreur Javascript sur la page avec Firebug ou Venkman. Autant que je sache, la fenêtre devrait être fermée.

Pourquoi le deuxième événement 'onclick' ci-dessus fonctionnerait-il, mais pas le second?

Répondre

3

Si je lis bien votre problème, vous avez simplement des problèmes pour fermer la boîte de dialogue modale.

Je viens de mettre ensemble un exemple en utilisant jqModal:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script> 
<script src="Scripts/tmp/jqModal.js" type="text/javascript"></script> 
<style type="text/css"> 
    .jqmWindow 
    { 
     display: none; 
     position: fixed; 
     top: 17%; 
     left: 50%; 
     margin-left: -300px; 
     width: 600px; 
     background-color: #EEE; 
     color: #333; 
     border: 1px solid black; 
     padding: 12px; 
    } 
    .jqmOverlay 
    { 
     background-color: #000; 
    } 
.jqmWindow 
    { 
     position: absolute; 

    } 
</style> 
<script type="text/javascript"> 
    $().ready(function() { 
     $('#dialog').jqm(); 

     $('#jqmOpen').click(function() { 
      $('#dialog').jqmShow(); 
      return false; 
     }); 
    }); 
</script> 
</head> 
<body> 
<a href="#" id="jqmOpen" name="jqmOpen">Open</a> 
<div class="jqmWindow" id="dialog"> 
    <a href="#" class="jqmClose">Close</a> 
    <input type="button" class="jqmClose" value="Close" id="jqmCloseBtn" name="jqmCloseBtn" /> 
    Some text in the modal dialog 
    </div> 
</body> 
</html> 

J'ai mis à la fois un lien et un bouton juste par exemple. Il semble que jqModal a besoin de/cherche la classe pour attacher le déclencheur de fermeture.

EDIT:

Je viens d'essayer votre code exact d'en haut et je n'ai pas une erreur JavaScript mais aussi rien ne se passe, ce qui est à prévoir que mon code ne sait pas ce que GB_hide() est . Donc ça m'a fait réfléchir.

est le bouton de votre cliquant sur comme:

<input type="button" value="Close" id="Button1" name="Button1" onclick="parent.parent.GB_hide();" /> 

Si oui, quelle est parent.parent.GB_hide()? GB_hide() pourrait-il être une fonction que vous ne mettez pas en œuvre sur cette page.

Firebug me montre que parent.parent est la fenêtre, donc après la mise:

<script type="text/javascript"> 
    function GB_hide() { 
     alert('Close'); 
    } 
</script> 

sur la page que je reçois maintenant une alerte affichée.

+0

Merci, Nick. Je comprends comment cela fonctionne et le fait fonctionner dans certains cas. J'essaie de comprendre pourquoi le modal sur une page se ferme comme prévu, mais celui sur une autre page refuse de le faire. – user101306

+0

La plupart du temps j'ai eu des problèmes comme celui-ci, il a été causé par une erreur JavaScript sans rapport. Avez-vous un exemple que vous pouvez publier/héberger? –

+0

Pas maintenant. Mes compétences de débogage JavaScript sont assez minces, donc si vous pouviez suggérer un endroit particulier à regarder ou un moyen de déboguer qui pourrait s'avérer utile. Merci! – user101306

0

plutôt que d'utiliser google donne URL de la page où vous souhaitez rediriger

OnClientClick="top.window.location.href='http://localhost/yourpagename.aspx'; parent.parent.GB_hide();" 

est le code pour fermer et rediriger boîte grise jquery sur le bouton clic.

Questions connexes