2010-01-20 5 views
4

Je souhaite une boîte modale jQuery qui apparaît à côté ou à côté du bouton qui la déclenche. La boîte doit apparaître dans la forme, ainsi que dans les domaines suivants:Créer une boîte modale jQuery qui apparaît à côté de l'action du déclencheur

clicking modal like a boss

Il devrait être la hauteur redimensionnable, donc si le contenu est long, la boîte va remettre en place.

Comment est-ce que je peux faire ceci?

+0

Si un google rapide n'a pas allumé quoi que ce soit, je dis l'écrire vous-même, jQuery le rend facile et vous apprendrez des tonnes. – rfunduk

Répondre

0

Je ne pense pas qu'il y ait quoi que ce soit tout à fait comme ce que vous cherchez de la boîte. Cependant, avec un peu de personnalisation et de peaufinage, vous pourriez être en mesure de vous rapprocher de votre objectif.

Pour utiliser un modal jQuery, il suffit de concevoir votre div modales quelque part sur votre page (je le fais habituellement au fond très) et lui donner une sytle initiale de "display: none":

<div id="promotion_dialog" title="Choose a piece for promotion:" style="display: none;"> 
    <table id="my_table"> .... </table> 
</div> 

Si vous concevez la div correctement, vous pourriez être en mesure de créer la forme que vous recherchez.

Ensuite, lorsque le bouton est cliqué, appeler une fonction Javascript qui affiche et positionne le div:

function openPromotionDialog() { 
    $("#promotion_dialog").dialog({width: 350, height: 100, modal: true, zIndex: 10000}); 
    $("#promotion_dialog").dialog('open'); 
} 

Voir la jQuery UI Dialog docs pour plus d'informations. Fournir un position paramètre à la méthode dialog() devrait vous permettre de le placer où vous voulez (vous auriez besoin d'examiner le bouton cliqué pour obtenir les positions).

Questions connexes