graffiti on the web 
prettypopinというプラグインを使えば、簡単にモーダルウインドウを表示させることが出きます。
…
ホームページやブログの記事なんかにスター評価を表示させたい場合は、jQuery Ratyで簡単に設定出来ます。
jQuery Raty – A Star Rating Plugin
目次
ダウンロード
まずは、必要なファイルを以下からダウンロードします。ダウンロードしたファイルを解凍して、jquery.raty.min.jsとimgフォルダ（星の画像）を任意の場所にアップロードします。
Raty on Github
ヘッダーでjsファイルの読み込み設定
jQueryファイルとratyのjsファイルをヘッダーで読み込みます。
jQuery読み込み1 | <script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script> |
1 | <script type="text/javascript" src="/js/jquery.raty.min.js"></script> |
この場合は、Ratyを設置した箇所にスコア3なので、星が3つだけ色づいたレーティングが表示されます。
1 2 3 | <script type="text/javascript"> $('#star').raty({ score: 3 });</script> |
表示したい場所にコードを設置
以下のコードをレーティングを設置したい場所に記述します。1 | <div id="star"></div> |
複数レーティング、動的表示
ページ内に複数のレーティング表示をしたい場合や、PHPなどで動的に表示させたい場合は、スコアをHTML側で設定するようにしてやれば簡単です。
read only、サーバ上の画像のパスは任意、スコアを動的に設定する場合1 2 3 4 5 6 7 8 9 10 11 | <script type="text/javascript"> $(function() { $('#star').raty( { readOnly: true, //閲覧者によるスコアの変更不可 score: function() { return $(this).attr('data-score'); },}); });</script> |
表示させたい場所に設置
1 2 3 | <div id="star" data-score="<?php echo $score1 ;?>"></div><div id="star" data-score="<?php echo $score2 ;?>"></div><div id="star" data-score="<?php echo $score3 ;?>"></div> |
コード内にも説明がありますが、readOnlyをtrueにすると閲覧モード（投票機能なし）、scoreの設定は、HTML側のdata-scoreの値（$score1,$score2,$score3）でレーティングスコアの設定、pathの項目で星画像のパス設定、といった感じです。これなら、PHPで動的にレーティング表示させるのも簡単に実装出来ますね。
この投稿へのコメント