Twitterのツイート画面の仕組みがわからない。

Question

Twitterの「ツイートするボタン」をクリックすると

このようにツイート画面が表示されます。

わからないこと

これは元の画面の上から表示されて、URLがtwitter.com/compose/tweetと変わります。このように前のページの上から新しい要素を追加する方法がわかりません。
どなたかご教授いただけませんでしょうか

Comments

[退会済みユーザー]

細かいことですが、いいねボタンを押したら、いいねのハートマークが色づいて「+1」のアニメーションが表示されるだけで、ツイート投稿画面は出てこないのではないかと。

[YossiSuper]

ありがとうございます。「いいねボタン」ではなく、「ツイートするボタン」でした。

Answer 1

htmlとcssとjsを駆使すれば実現可能な話と思います。

htmlにはインライン要素とブロック要素があり、
ブロック要素であればスタイルシートによって表示位置を制御できます。
positionによって表示の仕方を指定し、
座標top, leftの計算さえ出来て、すでに表示しているものの手前位置のz-indexを与えれば、
あたかもUIが重なって表示されるような見た目を再現できます。

ツイートボタンクリック時のイベント動作で、
必要なhtmlとcssをjsで生成して重ねているのかなと。
（本当にそうなっているかはわかりませんが、自分で真似して作ろうとするとそういうアプローチを取るかな、という意味で。）

ただ、何かそういう計算や加工が楽にできそうなライブラリはありそうですけどね、
私はそこまで詳しくないので、すぐに出てこないのですが。

ページの再読込とか遷移をせずにURLが書き換わるのは、
History.pushState()
History.replaceState()
によってHistory APIに介入しているようです。
ページ移動せずにアドレスバーのURLを変更する | GRAYCODE JavaScript

Comments

[YossiSuper]

ご回答いただきありがとうございます。HistoryAPIというものでアドレスバーのURLを書き換えられたのですね！ありがとうございます。

Answer 2

ツイッターがどうなってるかはともかく、pjaxのような形に思います。

Comments

[YossiSuper]

なるほど、そのようなものがあったのですね。ありがとうございます。参考にさせていただきます！