reactで画面にpopup的なものを表示させる

Question

添付した写真の右下にあるポップアアップ？的なものを表示させたいです。
イメージが適当で申し訳ありません。

要件としては、
・モーダルとは違い、このポップアップを表示していても操作は失われない。
・ポップアップコンポーネントの外をクリックしてもポップアップは消えない。
・ページ遷移をしても表示されたまま。
・ポップアップを表示するフラグがtrueになっている限り、表示されつづけ、通常通り、操作可能。

普通にページを閲覧できるようにしたいと思っております。

このような機能を実装するためのヒントがあれば教えて頂けると幸いです。

Comments

[hentaiman]

操作性を失わないとは、コンポーネント外をクリックしても閉じさせないポップアップという事なのか
それともスクロールは出来るけどコンポーネント外をクリックしたら閉じるような普通のポップアップなのか
＞　このポップアップを表示していても操作は失われず、
の表現を明確にしてください

[kinoko8800]

ご指摘ありがとうございます。

Answer 1

reactの話というより、cssの話も半分だと思います。
bodyタグ直下や、reactの最上位で、ポップアップのコンポーネントで定義しておき、その要素がReact側の操作で表示/非表示きりかえできるようにしておくのが大前提ですが。
最終的に、ポップアップのdivに対して、次のようなcssを当てると良いです。

div.xxxxx{
  position: fixed;
  right:30px;
  bottom:30px;
  width: 100px;
  background-color: blue;
}

Comments

[kinoko8800]

ご回答ありがとうございます。