サンプルはこちら 右上の「パスワードを忘れた方」をクリックすると、ポップアップウィンドウが中央に表示されます。
(1)ポップアップウィンドウのスタイルを変更。
①ポップアップウィンドウの背景を表示させない。
■data/Smarty/templates/default/popup_header.tpl
<body style="background:none;">
②幅の設定、線の設定を除く。
■html/user_data/packages/default/css/popup.css
div#windowcolumn { /*border-top: solid 3px #f90;*/ /*width: 560px;*/
div#window_area { /*width: 540px;*/
div#window_area table { /*width: 540px;*/
div#window_area #forgot { /*width: 440px;*/
(2)jQueryの「PopUpWindow」を利用する。http://rip747.github.com/popupwindow/
■html/jsフォルダに「jquery.popupwindow」フォルダを追加
jquery.popupwindowの中身→jquery.popupwindow.js jquery.popupwindow.settings.js
▼下記からもダウンロードできます。
http://www.kaiplus.com/eccube_sample/js/jquery.popupwindow/jquery.popupwindow.js
http://www.kaiplus.com/eccube_sample/js/jquery.popupwindow/jquery.popupwindow.settings.js
ウィンドウの調整は■jquery.popupwindow.settings.jsで行う。
var profiles = { windowPassword: { width:590, height:400, center:1, scrollbars:1 }, windowReview: { width:590, height:640, center:1, scrollbars:1 }, windowDeliv: { width:590, height:550, center:1, scrollbars:1 }, windowMailview: { width:640, height:700, center:1, scrollbars:1 }, }; $(function() { $(".popupwindow").popupwindow(profiles); });
(3)■data/Smarty/templates/default/site_frame.tpl 追記
<!--ポップアップウインドウ--> <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.popupwindow/jquery.popupwindow.js"></script> <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.popupwindow/jquery.popupwindow.settings.js"></script>
(4)下記のポップアップ画面へのリンク記述を修正する。
① パスワードを忘れた方(login_header.tpl)
■data/Smarty/templates/default/frontparts/bloc/login_header.tpl
<a href="<!--{$smarty.const.HTTPS_URL|sfTrimURL}-->/forgot/<!--{$smarty.const.DIR_INDEX_PATH}-->" onclick="win01('<!--{$smarty.const.HTTPS_URL|sfTrimURL}-->/forgot/<!--{$smarty.const.DIR_INDEX_PATH}-->','forget','600','400'); return false;" target="_blank">パスワードを忘れた方</a> ↓(変更) <a class="popupwindow" rel="windowPassword" href="<!--{$smarty.const.HTTPS_URL|sfTrimURL}-->/forgot/<!--{$smarty.const.DIR_INDEX_PATH}-->">パスワードを忘れた方</a>
② パスワードを忘れた方(login.tpl)
■data/Smarty/templates/default/frontparts/bloc/login.tpl
<a href="<!--{$smarty.const.HTTPS_URL|sfTrimURL}-->/forgot/<!--{$smarty.const.DIR_INDEX_PATH}-->" onclick="win01('<!--{$smarty.const.HTTPS_URL|sfTrimURL}-->/forgot/<!--{$smarty.const.DIR_INDEX_PATH}-->','forget','600','400'); return false;" target="_blank">パスワードを忘れた方</a> ↓(変更) <a class="popupwindow" rel="windowPassword" href="<!--{$smarty.const.HTTPS_URL|sfTrimURL}-->/forgot/<!--{$smarty.const.DIR_INDEX_PATH}-->">パスワードを忘れた方</a>
③ パスワードを忘れた方(MYページ(ログイン))
■data/Smarty/templates/default/mypage/login.tpl
※パスワードを忘れた方は<a href="<!--{$smarty.const.HTTPS_URL|sfTrimURL}-->/forgot/<!--{$smarty.const.DIR_INDEX_PATH}-->" onclick="win01('<!--{$smarty.const.HTTPS_URL|sfTrimURL}-->/forgot/<!--{$smarty.const.DIR_INDEX_PATH}-->','forget','600','460'); return false;" target="_blank">こちら</a>からパスワードの再発行を行ってください。 ↓(変更) ※パスワードを忘れた方は<a class="popupwindow" rel="windowPassword" href="<!--{$smarty.const.HTTPS_URL|sfTrimURL}-->/forgot/<!--{$smarty.const.DIR_INDEX_PATH}-->">こちら</a>からパスワードの再発行を行ってください。
④ 商品詳細ページの「新規コメントを書き込む」
■data/Smarty/templates/default/products/detail.tpl
<!--★新規コメントを書き込む★--> <a href="./review.php" onclick="win02('./review.php?product_id=<!--{$arrProduct.product_id}-->','review','600','640'); return false;" onmouseover="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_comment_on.jpg','review');" onmouseout="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_comment.jpg','review');" target="_blank"> ↓(変更) <a class="popupwindow" rel="windowReview" href="./review.php?product_id=<!--{$arrProduct.product_id}-->"
⑤ お届け先指定の「新しいお届け先を追加する」
■data/Smarty/templates/default/shopping/deliv.tpl
<a href="<!--{$smarty.const.ROOT_URLPATH}-->mypage/delivery_addr.php" onclick="win02('<!--{$smarty.const.ROOT_URLPATH}-->mypage/delivery_addr.php?page=<!--{$smarty.server.SCRIPT_NAME|h}-->','new_deiv','600','640'); return false;" onmouseover="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_add_address_on.jpg','addition');" onmouseout="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_add_address.jpg','addition');"> ↓(変更) <a class="popupwindow" rel="windowDeliv" href="<!--{$smarty.const.ROOT_URLPATH}-->mypage/delivery_addr.php?page=<!--{$smarty.server.PHP_SELF|h}-->">
⑥ MYページの「新しいお届け先を追加する」
■data/Smarty/templates/default/mypage/delivery.tpl
<a href="<!--{$smarty.const.ROOT_URLPATH}-->mypage/delivery_addr.php" onclick="win03('./delivery_addr.php','delivadd','600','640'); return false;" onmouseover="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_add_address_on.jpg','newadress');" onmouseout="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_add_address.jpg','newadress');" target="_blank"> ↓(変更) <a class="popupwindow" rel="windowDeliv" href="./delivery_addr.php"
⑦ MYページの「メール配信履歴一覧」
■data/Smarty/templates/default/mypage/history.tpl
<a href="#" onclick="win02('./mail_view.php?send_id=<!--{$tpl_arrMailHistory[cnt].send_id}-->','mail_view','650','800'); return false;"> ↓(変更) <a class="popupwindow" rel="windowMailview" href="./mail_view.php?send_id=<!--{$tpl_arrMailHistory[cnt].send_id}-->">