Q&A
「CSSでdisplay:none;をして見えないように」とのことですが、見えなくしているのは .modal と考えていいですか？
最初に、今回が初めての質問のため何か不手際があるかもしれないですがご容赦ください。
やりたいこと
ボタンをクリックした際に、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>
回答3件
0
ベストアンサー
ボタンが押されたら、スタイルまたはクラスを変更するのがいいかと思います。
「ボタンが押されたら」の記述については以下をご参照ください。
ブラウザイベントの紹介
「スタイルまたはクラスを変更する」の記述については以下をご参照ください。
スタイルとクラス
対象となる要素の参照については以下をご参照ください。
検索: getElement* と querySelector*
コードで、とのことなので追記
こちらが参考になると思います。
js
1<input type="button" value="表示" 2 onclick="document.getElementById('xyz').style.display = 'block';">
投稿2022/03/31 05:06
編集2022/03/31 05:46総合スコア37634
参照用URLを送っていただき、ありがとうございます。
処理を実行するjavascriptが全くわからないので、もし可能ならコードで教えていただけますと大変助かります。
追記しました。
0
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
質問文の
<script src="sample.js"></script>を消して、このコードに書き換えてください。たぶん、たぶん、意図したようになると思います。
こういうのは、有料で教えてくれるサイトがあったりするので、まぁあれですね。怒られます。
もし、一緒に仕事をする機会があったら、よろしくおねがいしますね。
がんばってくださいー。
参考
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
総合スコア345
0
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>
投稿2022/03/31 05:23
編集2022/03/31 05:48
総合スコア118164
まず、処理が実行されないのではなく、処理の方法がわからないのが前提の質問となっております。
javascriptが全くわからないので、もし可能ならコードで教えていただけますと大変助かります。
あなたの回答
tips
プレビュー
