最初に、今回が初めての質問のため何か不手際があるかもしれないですがご容赦ください。

やりたいこと
ボタンをクリックした際に、HTMLの要素を呼び出す処理をjavascriptにて行いたい。
1.事前にモーダル画面を作成したPHP　modal.phpがあります。
モーダル画面はrequireしておりますが、CSSでdisplay:none;をしてmodal.phpは見えないようにして　　
おります。
2.submitボタンを押した際にモーダル画面を呼ぶ処理をjavascriptにて実施したい。

あくまで下記のコードは質問のために用意した簡易コードのため、
画面遷移といった方法はなしで、あくまでjavascriptのonclickを使用して
処理を行いたいです。
javascriptが相当な初心者のため、お手数ですが教えていただけますと幸いです。

sample.php
<body>
<input type="submit" class="btn" id="btn" value="決定">
<div class="modal" id="modal"><?php require('modal.php');?></div>
<script src="sample.js"></script>
</body>

Lhankor_Mhy

2022/03/31 04:56

「CSSでdisplay:none;をして見えないように」とのことですが、見えなくしているのは .modal と考えていいですか？

0825_sk

2022/03/31 04:58

おっしゃる通りです、記載不足で申し訳ございません。見えないようにしたmodalを呼び出したいです。

行動規範の内容に同意します

回答3件

ベストアンサー

ボタンが押されたら、スタイルまたはクラスを変更するのがいいかと思います。

「ボタンが押されたら」の記述については以下をご参照ください。
ブラウザイベントの紹介

「スタイルまたはクラスを変更する」の記述については以下をご参照ください。
スタイルとクラス

対象となる要素の参照については以下をご参照ください。
検索: getElement* と querySelector*

コードで、とのことなので追記

こちらが参考になると思います。

js
1<input type="button" value="表示"
2       onclick="document.getElementById('xyz').style.display = 'block';">
HTMLの表示/非表示を切り替える2つの方法 [ホームページ作成] All About

投稿2022/03/31 05:06

編集2022/03/31 05:46

Lhankor_Mhy

総合スコア36074

0825_sk

2022/03/31 05:26

参照用URLを送っていただき、ありがとうございます。処理を実行するjavascriptが全くわからないので、もし可能ならコードで教えていただけますと大変助かります。

Lhankor_Mhy

2022/03/31 06:03

追記しました。

行動規範の内容に同意します

HTML
1<div id="button"><p>クリック</p></div>
2<script>
3document.getElementById("button").onclick = function() {
4
5let div = document.getElementById('modal');
6
7div.classList.remove('modal');
8div.id = "nonmodal";
9
10};
11</script>
12

質問文の

を消して、このコードに書き換えてください。たぶん、たぶん、意図したようになると思います。

こういうのは、有料で教えてくれるサイトがあったりするので、まぁあれですね。怒られます。
もし、一緒に仕事をする機会があったら、よろしくおねがいしますね。
がんばってくださいー。

参考
https://techacademy.jp/magazine/24327
https://developer.mozilla.org/ja/docs/Web/API/Element/id
https://syncer.jp/javascript-reference/element/id

投稿2022/04/01 11:35

penguin520

総合スコア345

modal処理をしたいならdialogタグをご利用ください
modal.phpがhtml、head、bodyタグを含まないようになっていますか？

sample

//sample.php

javascript
1<script>
2window.addEventListener('DOMContentLoaded', async()=>{
3  modal.innerHTML=await fetch('modal.php').then(res=>res.text());
4  btn.addEventListener('click',e=>{
5    e.preventDefault();
6    modal.toggleAttribute('open');
7  });
8});
9</script>
10<input type="submit" class="btn" id="btn" value="決定">
11<dialog id="modal"></dialog>