EC-CUBE2.12:ポップアップウィンドウを中央に表示する

サンプルはこちら 右上の「パスワードを忘れた方」をクリックすると、ポップアップウィンドウが中央に表示されます。

(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}-->">