シェアウィンドウの大きさを指定して画面中央にした
投稿日：2016年12月05日
お疲れ様です、ナガです。
前回のエントリー「シェアボタンのURLを記事毎に自動で設定する」の最後に書いていた、全画面でシェアウィンドウ開いて使いづらい（と思う）件を調整しました。 これで「バーンッ！」と全画面で別窓が立ち上がらなくて他のサイトでよく見るやつになったかと。
画面中央の位置を求める
僕は中学時代の成績が美術以外 ALL3 、高校は美術がなかったので完全に ALL3 という超凡人なので、別窓を画面中央の座標をもとめる計算式がなかなか浮かびませんでした。
var widthHalf = window.screen.width / 2,
heightHalf = window.screen.height / 2;
2
画面中央の座標を求めたいのでモニターの縦横の大きさを 2で割ります。
上記のコード、最初勘違いして window.innerWidth , window.innerHeight のように書いたところ、ウィンドウサイズ小さくすると全然中央に別窓がきてくれなくて 「(´・ω・`)？」 となったわけです。
そうだよね、これだとモニターサイズじゃなくて今開いているウィンドウのサイズを取得するもんだから、そりゃそうだよねと。
別窓を画面中央に配置する
次は別窓の大きさを設定して、画面中央に配置します。
モニター中央の座標から、開く窓のサイズを割る2した数値を引いてあげると出せます。 窓のサイズは 比率16:9 で、横640px 縦360px の大きさにします。
var blankWindowWidth = 640, // 別窓の横幅
blankWindowHeight = 360, // 別窓の縦幅
options = { // 後ほど記載する window.open の第３引数で使用する
left : Math.floor(widthHalf - (blankWindowWidth / 2)), // 別窓の X座標
top : Math.floor(heightHalf - (blankWindowHeight / 2)), // 別窓の Y座標
width : blankWindowWidth,
height: blankWindowHeight
};
2
3
4
5
6
7
8
別窓を開く
画面中央の座標、開く窓のサイズ、開いた窓の座標が取得できればあとは別窓を開きましょう。 例えば次のような htmlが対象の場合。
<ul class="m_shareList">
<li><a href="#" target="_blank">Facebook</a></li>
<li><a href="#" target="_blank">Twitter</a></li>
<li><a href="#" target="_blank">Google+</a></li>
</ul>
2
3
4
5
みんな大好き(僕は好きです) jQuery の each メソッドで class="m_shareList" の中の a タグを回してあげましょう。
先ほどのセクションで設定した変数と合わせると、構文は下記の通りになります。
var widthHalf = window.screen.width / 2,
heightHalf = window.screen.height / 2,
blankWindowWidth = 640, // 別窓の横幅
blankWindowHeight = 360, // 別窓の縦幅
options = { // 後ほど記載する window.open の第３引数で使用する
left : Math.floor(widthHalf - (blankWindowWidth / 2)), // 別窓の X座標
top : Math.floor(heightHalf - (blankWindowHeight / 2)), // 別窓の Y座標
width : blankWindowWidth,
height: blankWindowHeight
};
$('.m_shareList').find('a').each(function(index, el) {
$(this).on('click', function(event) {
if(window.innerWidth < 768) return;
event.preventDefault();
var thisHref = $(this).attr('href'),
arg = 'left=' + options.left
+ ',top=' + options.top
+ ',width=' + options.width
+ ',height=' + options.height;
window.open(thisHref, 'blankShareWindow', arg);
});
});
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
- 1～12行目は既に説明したから割愛します。
- 13行目： シェアボタン(先ほどのhtmlの場合は
aタグ)の数だけeachメソッドで処理。 - 14行目：
$(this)つまり、aタグをクリックしたらイベントが発火します。 - 15行目： ウィンドウサイズがSPサイズの時は処理をキャンセルしたいので
return。 - 16行目：
event.preventDefault()でaタグ自体のリンク機能を無効化。 - 17行目：
aタグの href属性を変数に格納。 - 18～21行目： 23行目に記載している
window.open()の第三引数を定義。 - 23行目：
window.open()メソッドを使ってシェアウィンドウを開く。- 第1引数： 別窓で開くページのURL
- 第2引数： ウィンドウの名前を設定。
- 第3引数： オプションの設定。窓の座標と大きさを指定していますがこの他にも多数設定できる項目があるので詳しくはMDNの「window.open」の節を参照してください。
最後に
これでシェアボタンを押して全画面で「バーンッ」と開かないのでイイ感じなったかと思います。