ITOBEN STYLE > EC-CUBE2.12:ポップアップウィンドウを中央に表示する 2012年10月6日カテゴリー:未分類 EC-CUBE2.12:ポップアップウィンドウを中央に表示する サンプルはこちら 右上の「パスワードを忘れた方」をクリックすると、ポップアップウィンドウが中央に表示されます。 (1)ポップアップウィンドウのスタイルを変更。 ①ポップアップウィンドウの背景を表示させない。 ■data/Smarty/templates/default/popup_header.tpl にスタイルを適用。 [php] [/php] ②幅の設定、線の設定を除く。 ■html/user_data/packages/default/css/popup.css [php] div#windowcolumn { /*border-top: solid 3px #f90;*/ /*width: 560px;*/ [/php] [php] div#window_area { /*width: 540px;*/ [/php] [php] div#window_area table { /*width: 540px;*/ [/php] [php] div#window_area #forgot { /*width: 440px;*/ [/php] 1 (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で行う。 [php] 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); }); [/php] (3)■data/Smarty/templates/default/site_frame.tpl 追記 [php] [/php] (4)下記のポップアップ画面へのリンク記述を修正する。 ① パスワードを忘れた方(login_header.tpl) ■data/Smarty/templates/default/frontparts/bloc/login_header.tpl [php] ② パスワードを忘れた方(login.tpl) ■data/Smarty/templates/default/frontparts/bloc/login.tpl [php] ③ パスワードを忘れた方(MYページ(ログイン)) ■data/Smarty/templates/default/mypage/login.tpl [php] ※パスワードを忘れた方は④ 商品詳細ページの「新規コメントを書き込む」 ■data/Smarty/templates/default/products/detail.tpl [php] ⑤ お届け先指定の「新しいお届け先を追加する」 ■data/Smarty/templates/default/shopping/deliv.tpl [php] ⑥ MYページの「新しいお届け先を追加する」 ■data/Smarty/templates/default/mypage/delivery.tpl [php] ⑦ MYページの「メール配信履歴一覧」 ■data/Smarty/templates/default/mypage/history.tpl [php]
サンプルはこちら 右上の「パスワードを忘れた方」をクリックすると、ポップアップウィンドウが中央に表示されます。
(1)ポップアップウィンドウのスタイルを変更。
①ポップアップウィンドウの背景を表示させない。
にスタイルを適用。■data/Smarty/templates/default/popup_header.tpl
[php]
[/php]
②幅の設定、線の設定を除く。
■html/user_data/packages/default/css/popup.css
[php]
div#windowcolumn {
/*border-top: solid 3px #f90;*/
/*width: 560px;*/
[/php]
[php]
div#window_area {
/*width: 540px;*/
[/php]
[php]
div#window_area table {
/*width: 540px;*/
[/php]
[php]
div#window_area #forgot {
/*width: 440px;*/
[/php]
(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で行う。
[php]
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);
});
[/php]
(3)■data/Smarty/templates/default/site_frame.tpl 追記
[php]
[/php]
(4)下記のポップアップ画面へのリンク記述を修正する。
① パスワードを忘れた方(login_header.tpl)
■data/Smarty/templates/default/frontparts/bloc/login_header.tpl
[php]
② パスワードを忘れた方(login.tpl)
■data/Smarty/templates/default/frontparts/bloc/login.tpl
[php]
③ パスワードを忘れた方(MYページ(ログイン))
■data/Smarty/templates/default/mypage/login.tpl
[php]
※パスワードを忘れた方は④ 商品詳細ページの「新規コメントを書き込む」
■data/Smarty/templates/default/products/detail.tpl
[php]
⑤ お届け先指定の「新しいお届け先を追加する」
■data/Smarty/templates/default/shopping/deliv.tpl
[php]
⑥ MYページの「新しいお届け先を追加する」
■data/Smarty/templates/default/mypage/delivery.tpl
[php]
⑦ MYページの「メール配信履歴一覧」
■data/Smarty/templates/default/mypage/history.tpl
[php]