ところでモーダル、皆さん使ってますかね。
あとCSSで吹き出しとかそんな感じのもの作ったりしますかね?
矢印をクリックしたらモーダルを呼び出すって処理を入れたところ
私の環境ではFirefoxでのみBefore/After要素がズレましたorz
(業務なので画像無くて申し訳ない)
ChromeとかOperaとか、iPhone, Androidではちゃんと表示されてます。
解決方法として考えたこと
- エージェントチェックでFFのみjQueryを使ってCSSハックを入れる
- Before/After要素を廃止し、別個の要素として作成し直す
- 画像を作成して切り替える
1番はそれによる管理コストが面倒くさいのでパス
3番はFixが遠そうなのでパス
というわけで2番をチョイスです。
メインとなるブロック(長方形) を作成し、jQueryでそのサイズを測って
var getWidth = $('#target_oblong').outerWidth();
なんかそれだけだとBootstrapの影響を受けてるっぽいので 要素をFirebugで検証して上記のgetWidthに足してちょうどいい値を加算してあげます。
var addValue = getWidth + 15 //値は適当です。
後はjQueryでCSSにマージン足してあげるといい感じになりました。
$('#target_triangle').css('margin-left',addValue);
おしまい。
