questions simples modales - accolés, Disappearing Contenu

Je suis un débutant jQuery et ont truqué Modal simples pour me permettre d'avoir plus d'un modal sur une page en faisant cela dans mon script:questions simples modales - accolés, Disappearing Contenu

$('input.basic, a.basic').click(function (e) { e.preventDefault(); $(this).next('.basicModalContent').modal(); });

voici mon code HTML:

<a class="basic linkHeading" href="#">Link Heading</a> 

<div class="basicModalContent" style="display: none;"> 
    <h1>This Resource Requires Login</h1> 
    <a href="#" class="simplemodal-close" title="Close">Cancel</a></p> 
</div><!--basicModal-->

La question que je suis en cours d'exécution en est tout fonctionne bien sur le premier clic & à proximité. Le deuxième clic lance le modal, mais tout le contenu est parti de l'intérieur de la boîte.

voir ce lien pour le bug dans l'action: http://blanksky.com/test/ebenefits21/modal.html

Source

2009-11-02 Anonymous

Lorsque vous masquez la boîte de dialogue, jQuery change la position de la div dans les DOM, voulant ensuite le localiser avec « $(this).next(...) », vous ne pouvez pas le faire. Vous devriez avoir un identifiant ou une référence pour localiser le contraire.

EDIT: Eh bien, vous me pensez un peu d'écho. J'espère que c'est utile le code que je traverse. Je ne suis pas testé:

$('input.basic, a.basic').click(function (e) 
{ 
    e.preventDefault(); 
    var el = ""; 

    if($(this).data("xid")!=undefined) 
    { 
     el = $($(this).data("xid")); 
    } 
    else 
    { 
    var xid = "xid_" + ((new Date()).getTime()); 
    el = $(this).next('.basicModalContent'); 
    $(this).data("xid", xid); 
    if (el.lenght>0) 
     el.attr("id", xid); 
    } 

    if (el.lenght>0) 
    { 
    el.modal(); 
    } 
});

Source

2009-11-02 16:31:29

la page tire du contenu dynamique, donc je n'ai aucun moyen de savoir combien de liens modaux il pourrait y avoir, ou comment les référencer. –

je suggère quelque chose comme:

Liens:

<a href="#" class="basic" id="link-1">link1</a> 
<a href="#" class="basic" id="link-2">link2</a> 
<a href="#" class="basic" id="link-3">link3</a>

contenu caché (via CSS ou le style en ligne)

<div id="link-1-content" style="display:none"> 
<p>content</p> 
</div> 
<div id="link-2-content" style="display:none"> 
<p>content</p> 
</div> 
<div id="link-3-content" style="display:none"> 
<p>content</p> 
</div>

JavaScript:

$(document).ready(function() { 
      $('#basic-modal input.basic, #basic-modal a.basic').click(function (e) { 
              e.preventDefault(); 
              var content = '#' + this.id + '-content'; 
              $(content).modal(); 
      }); 
});

Quelque chose comme ça devrait faire l'affaire.

Source

2009-11-02 19:15:43

c'est parfait, merci beaucoup Eric (votre service client est le meilleur !!) –

Une solution nécessitant moins de balisage consiste à utiliser une seule "fenêtre" modale. Voir l'exemple suivant:


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Simple Modal Demo</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="simplemodal.js"></script> 
<script type="text/javascript"> 
    $(document).ready(
    function() { 
    $('.loginRequired').bind('click', 
     function() { 
     $('#clickedLink').html(this.id); 
     $('#modalWindow').modal(); 
     return false; 
     } 
    ); 
    } 
); 
</script> 

<style> 
    #simplemodal-container { display: none; } 
    #simplemodal-overlay { background: #000; opacity: 0.4; } 
    #modalWindow { 
    background: #FFF; 
    border: 1px solid black; 
    height: 100px; 
    opacity: 1.0; 
    padding: 10px; 
    position: relative; 
    width: 220px; 
    z-index: 1010; 
    } 
</style> 
</head> 
<body> 
<p><a href="http://example.com/" id="link1" class="loginRequired">Login Required Link</a></p> 
<p><a href="http://example.com/" id="link2" class="loginRequired">Login Required Link</a></p> 
<p><a href="http://example.com/" id="link3" class="loginRequired">Login Required Link</a></p> 
<p><a href="http://example.com/">http://example.com/</a></p> 

<div id="simplemodal-container"> 
    <div id="modalWindow"> 
    <p>Sorry, you must login to click <b id="clickedLink">unknown</b>.</p> 
    <p><a href="#" class="simplemodal-close">Cancel</a></p> 
    </div> 
</div> 

</body> 
</html>

Source

2009-11-10 21:12:04

questions simples modales - accolés, Disappearing Contenu

Répondre

Questions connexes