Faire un div pop onclick comme la fancybox jquery

j'ai besoin de faire apparaitre un div comme le jquery fancybox avec élastique effet, je suis en utilisant le dessous de codage mais il fonctionne pas...

HTML:

<a href="#" id="LoginAnchorLink">ClickME</a>
<div id="dialog" class="Popup" style="display:none;">
    content of the div have to be popup
</div>

CSS:

.Popup {
    position: fixed;
    background-color: #ffffff;
    width: 100px; 
    height:100px;
}

jQuery:

jQuery(document).ready(function () {
    $("#LoginAnchorLink").click(function () {
        $("#dialog").fancybox();
    });
});

Suis-je raté quelque chose ou a quelque chose va mal?

  • #LoginAnchorLink n'est pas référencé dans votre code HTML.
  • est-il possible d'atteindre le popup effet dans des div avec effet de zoom?
InformationsquelleAutor krish | 2012-04-17
  1. 2

    Après re-lecture, j'ai décidé de modifier le post.
    Cela devrait être plus clair.

    Ne pas oublier de joindre le css et les fichiers javascript pour fancybox.

    Votre formulaire de connexion

    <div style="display: none;">
    <div id="logindiv" style="width:400px;height:100px;overflow: hidden;">
        You div with login data and input fields
    </div>
</div>

    Lien de connexion

    <a id="loginbutton" href="#logindiv" title="enter your login details here">Login Here</a>

    jQuery

    <script type="text/javascript">
    $(document).ready(function() {
        $("#loginbutton").fancybox({
            'titleShow'     : true,
            'transitionIn'  : 'elastic',
            'transitionOut' : 'elastic',
        });
    });
</script>
    InformationsquelleAutor Scriptor
  2. -1

    Votre code HTML devrait avoir à changer comme dis

    <a href="#" id="LoginAnchorLink">ClickME</a>
<div style="display:none;">
<div id="dialog" class="Popup">
    content of the div have to be popup
</div>
</div>

    assurez-vous que le chemin d'accès de la bibliothèque jquery et fancybox fichiers js

    • si il utilise toujours la même jQuery code posté, ces modifications html de ne pas faire de différence. Vous devriez proposer un travail jQuery code de trop.
    InformationsquelleAutor Sam