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).
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