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で動的にレーティング表示させるのも簡単に実装出来ますね。
この投稿へのコメント