Comment faire une image pop-up sur l'écran sans ouvrir une fenêtre

J'ai donc fait un simple jeu où il y a un tas de photos à l'écran et lorsque vous cliquez dessus, vous obtenez un point. Voici le code pour que:

<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
    picturesRemoved++;
  });
});
</script>

Puis j'ai aussi plus tard dans le code:

var picturesRemoved = 0;

et ce, pour les photos:

<br><p><img src="test.jpg" border="0" width="1001" height="159"></p>

Ce que je veux, c'est pour que les photos vont garder popping up sur l'écran jusqu'à ce que vous cliquez sur un certain nombre d'entre eux. Un certain montant doit être de 20. Je peux utiliser les CSS ou JavaScript ou HTML, ou jQuery. (Ou tout.)

Merci!

  • donc, si quelqu'un clique à 20 photos, les photos seront supprimées?
  • pas de. Ils ont cessé d'apparaître.
  • Votre code actuel se cache l'image.
  • Ouais. Je sais. Je le veux pour masquer l'image lorsque vous cliquez sur elle. Mais alors plus de pop up.
  • surgissant comme une sorte de lightbox?
  • honnêtement, je ne sais pas ce que c'est. (ne le dites à personne.)
  • ouais. Je viens de regardé ce qu'un album est, et oui, c'est un peu ce que je veux.

InformationsquelleAutor Captain BudderChunk | 2014-02-13
  1. 1

    Exemple de code HTML:

    <div class="cut_oak_tree">
  <img src="http://www.pbpixels.com/x/images/oak.png" onclick="myFunction(this)" /> 
  <img src="http://www.pbpixels.com/x/images/oak.png" onclick="myFunction(this)" /> 
  <img src="http://www.pbpixels.com/x/images/oak.png" onclick="myFunction(this)" /> 
</div>
<div id='countervalue'>0</div>

    Et Javascript:

    var inter;

$(document).ready(function(){
    inter  = setInterval(function(){
        $('.cut_oak_tree').append('<img src="http://www.pbpixels.com/x/images/oak.png"onclick="myFunction(this)">');
    },1000);
});

var counter = 0;

function myFunction(img) {
    counter++;
    document.getElementById('countervalue').innerHTML = counter;
    img.onclick = null;
    img.remove();
    if(counter === 20){
        clearInterval(inter);
    }
}

    Mise à JOUR

    Essayez ceci:

    http://jsfiddle.net/nd2w3/2/

    • devrais-je voter en bas? Utilisez votre downvotes chaque fois que vous rencontrez un éhontée bâclée, sans effort déployé post, ou une réponse qui est clairement et peut-être dangereusement erronée.
    • - Je savoir quand utiliser ma voix, l'OP n'est rien avec le code que vous avez posté. Depuis quand ils ont <yourImg> tags? Ok vous a montré comment ajouter et supprimer un élément, mais cela ne compte que pour 1 élément. Votre violon est fine, afin de mettre à jour votre code sur DONC.
    • Ok, je vais mettre à jour mon code.
    • Merci! C'est vraiment génial!
    • donc.... Il fonctionne sur jsfiddle, mais quand je l'ai copier et coller, ça ne marche pas à tous. Si je clique sur les photos, ils disparaissent, mais ne s'affiche plus. Aussi, le compteur div dit NaN.
    • Vous devez utiliser jQuery pour que cela fonctionne.

    InformationsquelleAutor ThermalCube
  2. 1

    Je ne suis pas un bon programmeur javascript, Mais je sais que vous pouvez utiliser ce code pour en faire l'élément visible ou invisible. Vous pouvez zet la propriété par défaut de toutes les images de display:none; en css. Et pour le javascript:

    Invisible

    document.getElementById(picture").style.display="none";

    Visible

    document.getElementById("myP").style.display="inline";
    • mais ne serait-ce pas masquer toutes les photos?
    • Oui, mais alors, vous pouvez définir les images que vous voulez visible vible avec document.getElementById("myP").style.display="inline";
    InformationsquelleAutor
  3. 1
    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        function addImage() {
            $('body').append('<p class="click-me" onclick="onImageClicked(this)"><img src="test.jpg" border="0" width="1001" height="159"></p>');
        }
        function onImageClicked(s) {
            $(s).remove();
            if (++document.picturesRemoved == 20) {
                clearInterval(document.myInterval);
            }
        }
        $(document).ready(function () {
            document.picturesRemoved = 0;
            document.myInterval = setInterval(addImage,1000);  
        });
    </script>
</head>
<body>

</body>
</html>
    InformationsquelleAutor Sheldon Neilson
  4. 0

    //jquery mobile probablement//

    <script type="text/javascript">
    $( document ).on( "pagecreate", function() {
        $( ".photopopup" ).on({
            popupbeforeposition: function() {
                var maxHeight = $( window ).height() - 60 + "px";
                $( ".photopopup img" ).css( "max-height", maxHeight );
            }
        });
    });
   </script>

    //après qui, dans le langage html faire un bouton ou un lien comme ceci//

    <a href="#my_image" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline"><img src="img_folder/my_image.jpg" alt="my image"></a>

    //placez votre image comme ceci//

    <div data-role="popup" id="my_image" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15">
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>

    • Je viens de remarquer quelque chose: dans votre jquery, vous avez écrit <script type="text/javascript">
    • jQuery est tout simplement une bibliothèque javascript, une extension. La langue est encore javascript. Le <script> balises par défaut javascript si aucun n'est spécifié.
    • ohhhhhhhh.......
    • peut-être que l'erreur peut-être pas, mais de mon point juste au cas où pour ne pas obtenir d'autre avec d'autres script!!!
    InformationsquelleAutor ZeCo
  5. 0

    Une méthode pour ce faire est d'utiliser un "au survol de la souris" dans le html.

    À l'intérieur de la balise script:

    <script>
function large(x) 
{
    x.style.height = "640px";
    x.style.width = "480px";
}

function normal(x) 
{
    x.style.height = "50px";
    x.style.width = "50px";
}
</script>

    À l'intérieur de la balise d'image:

    <img onmouseover="large(this)" onmouseout="normal(this)" border="0" src="x" alt="x" width="50" height="50">

    NB: x = votre nom de l'image

    InformationsquelleAutor Minal Raniga