Помогите со всплывающим окном
Нужно сделать так, чтобы при нажатии на кнопку появлялось окно. Оно появляется и сразу исчезает. Вот HTML:
<!DOCTYPE html> <html> <head> <title>Тестовое задание</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <!-- Блок с заданием--> <div id="task"> <!-- Номер задания--> <p id="number_question"> Задание № 5. </p> <!-- Условие--> <p> $$\frac{3\frac{1}{7}+1\frac{1}{4}(75:\frac{25}{3}-14)\cdot\frac{4}{7}}{2\sqrt{\frac{2}{0+\frac{1}{2} }}\cdot\frac{1}{2}}=$$ </p> </div> <!-- Блок ввода и отправки ответа--> <div id="answer_inner"> <form method="post"> <input type="text" placeholder="0" id="answer"/> <input type="submit" id="answer_submit" value="ответить"/> </form> </div> <!--Окно при правильном ответе--> <div id="correct_answer_inner"> <img src="img/correct_answer_smile.png" class="smile" alt="Ответ правильный"/> <form> <input type="submit" class="next_question" value="следующий вопрос"/> </form> </div> <!--Окно при неправильном ответе--> <div id="error_answer_inner"> <img src="img/error_answer_smile.png" class="smile" alt="Ответ неправильный"/> <form> <input type="submit" id="one_more" value="ответить еще раз"/> <input type="submit" class="next_question" value="следующий вопрос"/> </form> </div> <!-- Подключение и конфигурация MathJax (верстка формул)--> <script type="text/x-mathjax-config"> MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}}); </script> <script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML"> </script> <!--Подключение скрипта для обработки ответа--> <script src="js/script.js"> </script> </body> </html> CSS: /* Обнуление стилей*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } body{ font-family:Arial; font-size:14px; } #task{ border: 2px solid #ACAAA9; width:500px; position:relative; left:50%; margin-left:-250px; margin-bottom:40px; } #number_question{ padding:5px; background:#BBBAB9; } #answer_inner{ width:500px; position:relative; left:50%; margin-left:-250px; text-align:center; } #answer{ padding:5px; width:490px; margin-bottom:20px; } #answer_submit, .next_question{ font-size:20px; padding:10px; text-transform:uppercase; border:none; background:green; color:white; } #correct_answer_inner{ z-index:1000; position:absolute; min-width:200px; min-height:100px; background:#fff; top:50%; margin-top:-90px; left:50%; margin-left:-133px; padding:10px; text-align:center; display:none; } #error_answer_inner{ z-index:100; position:absolute; min-width:200px; min-height:100px; background:#fff; top:50%; margin-top:-90px; left:50%; margin-left:-235px; padding:10px; text-align:center; display:none; } .smile{ margin-bottom:20px; } #one_more{ font-size:20px; padding:10px; text-transform:uppercase; border:none; background:#393185; color:white; } JS: var fun=function(){ client_answer=client_answer_inner.value; if (client_answer==correct_answer){ //ответ правильный correct_window.style.display="block"; } else if (client_answer=null){ //ничего не ввел error_window.style.display="block"; } else{ //ответ неправильный error_window.style.display="block"; } } var correct_answer='-3/14'; //правильный ответ var client_answer=''; //для хранения ответа клиента var client_answer_inner=document.getElementById("answe r"); //для доступа к полю ввода ответа var answer_button=document.getElementById("answer_subm it"); //доступ к кнопке отправки answer_button.onclick=fun; //при нажатии на кнопку оправки выполнится функция var correct_window=document.getElementById("correct_an swer_inner"); var error_window=document.getElementById("error_answer _inner"); |
Часовой пояс GMT +3, время: 23:47. |