phpとjavascriptを使って、以下のようなクイズページを作っています。
配列のキーを問題に、値が答えになっています。
例えば、画面上に表示された
apple
orange
banana
という英単語のどれかをクリックすると、モーダルウィンドウが開いて、答え(日本語名)が表示するという仕組みを作りたいのですが、
まず、モーダルウィンドウが開きません。。。
echo '<div class="open">'.$kind.'</div>';
この部分のclassをidにして動かすとモーダルウィンドウがうまく開いたのですが、
それだと一番上の値にしか作用しなかったため、classに書き直しました。
その途端、全く動かなくなりました。
改善点をご指導ください。よろしくお願いいたします。
index.php
<?php $fruits = array( 'apple' => 'りんご', 'orange' => 'オレンジ', 'banana' => 'バナナ' ); ?> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="styles.css"> <title>Modal Window</title> </head> <body> <?php foreach ($fruits as $kind) { echo '<div class="open">'.$kind.'</div>'; } ?> <div id="mask" class="hidden"></div> <!--モーダルウィンドウ部分--> <div id="modal" class="hidden"> <p>答えはバナナです!</p> <div id="close"> Close </div> </div> <script src="main.js"></script> </body> </html>
main.js
(function() { 'use strict'; var open = document.getElementByClassName('open'); var close = document.getElementById('close'); var modal = document.getElementById('modal'); var mask = document.getElementById('mask'); open.addEventListener('click', function() { modal.className = ''; mask.className = ''; }); close.addEventListener('click', function() { modal.className = 'hidden'; mask.className = 'hidden'; }); mask.addEventListener('click', function() { // modal.className = 'hidden'; // mask.className = 'hidden'; close.click(); }); })();
style.css
.open,#close { width: 100px; text-align: center; border: 1px solid #ccc; margin: 0 auto; cursor: pointer; } #mask { background: rgba(0, 0, 0, 0.4); position: fixed; top: 0; bottom: 0; right: 0; left: 0; } #modal { background: #fff; width: 300px; padding: 20px; border-radius: 4px; position: absolute; top: 40px; left: 0; right: 0; margin: 0 auto; } #modal p { line-height: 1.5; margin: 0 0 20px; } #mask.hidden { display: none; } #modal.hidden { transform: translate(0, -500px); } コード
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/10/05 12:13