バージョン選択

フォーラム

 どうか教えて下さい！  バグ見つけましたよ！  こんな機能あったらなぁ  プラグインについて  その他

メニュー

 当サイトについて  初めてご利用になる方へ  EC-CUBE開発情報

オンライン状況

74 人のユーザが現在オンラインです。 (67 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 74
もっと...

サイト内検索
質問 > フロント機能 > bootstrap モーダルの表示

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
ccm1909
投稿日時: 2016/12/12 19:03
対応状況: −−−
半人前
登録日: 2016/8/17
居住地:
投稿: 12
bootstrap モーダルの表示
※環境
ECCUBE Version 3.0.12-p1

商品詳細ページでbootstrapのモーダルを表示させたくて

http://getbootstrap.com/javascript/#modals-related-target

上記のソースを/app/template/default/Product/detail.twigにコピペしてみましたがモダルが影に隠れてしまいました。おそらく、動作もしていないと思いますが解決策を教えてください！
468
投稿日時: 2016/12/13 11:09
対応状況: −−−
神
登録日: 2008/10/26
居住地:
投稿: 3217
Re: bootstrap モーダルの表示
ちょっと調べてみましたが、
フロント側のHTMLの<div id="contents"></div>の中にモーダルウィンドウの記述がある場合、この状態となるようです。

style.cssの#contentsのスタイルシートの記述が原因で
<div id="contents"></div>がモーダルのオーバレイの下の回り込むようです。
とりあえずstyle.css内の以下の記述を削除すると動作するようですが、
私がECCUBE3のスタイルシートに精通しているわけではないので、
他にどのような影響が出るか分かりませんので、,
その点はご了承ください。

811行目
#contents, #header, #footer, .pagetop {
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translateZ(0); ←これを削除
    -moz-transform: translateZ(0); ←これを削除
    -ms-transform: translateZ(0); ←これを削除
    -o-transform: translateZ(0); ←これを削除
    transform: translateZ(0); ←これを削除
    will-change: transform; ←これを削除
}


828行目
#contents {
    min-height: 100vh;
    z-index: 2; ←これを削除
}


3501行目
#contents {
    min-height: 100%;
    z-index: 2; ←これを削除
}
ccm1909
投稿日時: 2016/12/14 19:10
対応状況: −−−
半人前
登録日: 2016/8/17
居住地:
投稿: 12
Re: bootstrap モーダルの表示
ありがとうございます。
助かりました！！
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は88,899名です
総投稿数は110,002件です

投稿数ランキング

1
seasoft 		7367
2
468 		3217
3
AMUAMU 		2712
4
nanasess 		2313
5
umebius 		2085
6
yuh 		1819
7
h_tanaka 		1646
8
red 		1570
9
mcontact 		1295
10
tsuji 		958
11
fukap 		907
12
shutta 		835
13
tao_s 		799
14 ramrun 789
15 karin 689
16 sumida 641
17
homan 		633
18 DELIGHT 572
19
patapata 		502
20
flealog 		485


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.