HTMLのモーダル表示について質問があります

Question

Htmlを用いたWebサイト構築における、
モーダルウィンドウ作成・出力についてお伺いしたいことがございます。

私は、Webページ作成に関して勉強を始めたばかりなのですが、
Webページにて「モーダル選択ダイアログ」を作成したいです。
しかしながら、私のイメージでは、選択ダイアログとは特定のボタンが押されない限り、モーダルウィンドウは表示されないものという認識です。
では、モーダル出力に関する文言はどの段階で書き込むべきなのでしょうか？
そのWebページを開いたとたんに、
何もボタンを押していないのにモーダルウィンドウが出力されてしまう、ということは起きないのでしょうか？
やはり、普通は、If文などの条件分岐などで、特定のボタンが押されたときだけフラグを立てて判断させる、等の設計をする必要があるのでしょうか？

Html初心者なため、
どなたかお力をお借りしたいです。

Comments

[退会済みユーザー]

あなたの言う「モーダル」とは何なのでしょう？ 話を始める前に、その定義をきちんと具体的に書いてもらう必要があります。定義なしでは議論が発散しそうですので。

[m.ts10806]

タイトルは要件を記載してください。実現したいこと、起きている問題。
あと、自身が調べたことにやってみたこと、そのコードを追記してください

[Tanaka2319]

下記のような選択ダイアログを実装したいです
https://syncer.jp/jquery-modal-window

[退会済みユーザー]

JavaScript, jQuery のプラグインを使うということですか？ そうれとも、自力でコードをスクラッチで書きたい？

[m.ts10806]

（質問への追記・修正依頼です）
タイトルは要件を記載してください。実現したいこと、起きている問題。
あと、自身が調べたことにやってみたこと、そのコードを追記してください

[m.ts10806]

というか、参照先のコードをよく読んでないのがよく分かる質問ですね。丸投げは非推奨ですよ。
https://teratail.com/help/avoid-asking

Answer 1

モーダル出力に関するコードは最初から書き込みます。
モーダルの部分はCSSのdisplay: none, visibility: hidden, opacity: 0 などで
非表示になっているためボタンを押してJavaScriptで
display: block, visibility: visible, opacity: 1 に変えなければ
ブラウザの仕様上、モーダル部分は表示されないようになっています。

こちらのサンプルをご参照下さい。
https://codepen.io/mycreatesite/pen/YbKvQL

では、モーダル出力に関する文言はどの段階で書き込むべきなのでしょうか？
そのWebページを開いたとたんに、
何もボタンを押していないのにモーダルウィンドウが出力されてしまう、ということは起きないのでしょうか？