Afficher les popups pour les utilisateurs

-1

Je veux installer un popup tel que montré sur Google Maps, pour noter les restaurants (après la recherche). L'utilisateur survole la note globale, puis une fenêtre contextuelle s'affiche sur lequel l'utilisateur peut évaluer. J'utilise jquery. La fenêtre contextuelle devrait disparaître une fois la mise au point disparue de la fenêtre contextuelle. Donc, fondamentalement, je veux savoir comment afficher un tel popup?Afficher les popups pour les utilisateurs

Source

2011-09-27 ruskin

une recherche rapide sur google pour ["jquery tooltip"] (http://www.google.com/webhp?hl=fr#sclient=psy-ab&hl=fr&site=webhp&source=hp&q=jquery%20tool%20tip) ou ["Fenêtre modale jquery"] (http://www.google.com/#pq=jquery+tool+tip&hl=fr&sugexp=pfwc&cp=14&gs_id=51&xhr=t&q=jquery+modal+window) vous conduira au bateau- des tas de bons outils. Il y aura * littéralement * de grands bateaux remplis de réponses différentes. –

@MichaelJasper Tellement vrai. C'est intéressant aussi que les gens commencent à venir à SO avant google; peu de sites peuvent s'en vanter! – chown

@chown - Le problème est qu'ils ne cherchent pas SO, ils posent simplement des questions qui ont déjà été répondues. Je ne pense pas que cela mérite un vote négatif. http://stackoverflow.com/questions/3117879/creating-popup-content-with-jquery –

jquery tooltip is a good one

est aussi simple que:

$("[title]").tooltip(); 
// or 
// $(".trigger").tooltip({ position: "bottom left", opacity: 0.7});

personnaliser Même le code html dans l'info-bulle (de leur exemple page here):

<!-- trigger element. a regular workable link --> 
<a id="download_now">Download now</a> 

<!-- tooltip element --> 
<div class="tooltip"> 

    <img src="http://static.flowplayer.org/img/title/eye.png" alt="Flying screens" 
     style="float:left;margin:0 15px 20px 0" /> 

    <table style="margin:0"> 
     <tr> 
      <td class="label">File</td> 
      <td>flowplayer-3.2.7.zip</td> 
     </tr> 
     <tr> 
      <td class="label">Date</td> 
      <td>2011-03-03</td> 
     </tr> 
     <tr> 
      <td class="label">Size</td> 
      <td>112 kB</td> 
     </tr> 
     <tr> 
      <td class="label">OS</td> 
      <td>all</td> 
     </tr>  
    </table> 

    <a href="/3.2/">What's new in 3.2</a> 
</div>

Puis:

$("#download_now").tooltip({ effect: 'slide'});

Source

2011-09-27 05:25:14 chown

Afficher les popups pour les utilisateurs

Répondre

Questions connexes