By
IsayR
Всем привет, подскажите, пожалуйста, как сделать так, чтобы форма открывалась при нажатии на кнопку, которой на странице находится несколько штук? У меня есть кнопка и несколько ее копий на странице, и я хочу, чтобы если пользователь захотел нажать на кнопку, только на другом месте страницы, открывалась та же самая форма. Но, к сожалению, ее открывает, только самая первая кнопка, подскажите, пожалуйста, решение! Спасибо!
<body>
<button class="btn-modal" id="open">Отправить заявку</button>
<button class="btn-modal" id="open">Отправить заявку</button>
<button class="btn-modal" id="open">Отправить заявку</button>
<div class="wrapper-modal" id="wrapperModal">
<div class="overlay-modal" id="overlayModal"></div>
<div class="form-modal__item" id="formModal">
<form action="#" id="formModalBody" class="form-modal__body">
<h4 class="form-modal__title">
Оставьте заявку
</h4>
<span class="close" id="close">
<div class="form-modal__item">
<label for="formName" class="form-modal__label">
Имя:
</label>
<input id="formName" type="text" name="name" class="form-modal__input" placeholder="Ваше имя *">
</div>
<div class="form-modal__item">
<label for="formTel" class="form-modal__label">
Номер телефона:
</label>
<input id="formTel" type="tel" name="length" class="form-modal__input" placeholder="+7 (___) ___ - __ - __ *">
</div>
<div class="form-modal__item">
<label for="formEmail" class="form-modal__label">
Email:
</label>
<input id="formEmail" type="text" name="width" class="form-modal__input" placeholder="Введите e-mail *">
</div>
<button class="form-modal__button" id="open">Отправить</button>
</form>
</div>
</div>
</body>
#wrapperModal {
display: none;
position: fixed;
width: 100%;
height: 100%;
z-index: 3;
top: 8%;
left: 20%;
}
#wrapperModal.active {
display: block;
}
#overlayModal {
position: absolute;
top: -8%;
left: -20%;
width: 100%;
height: 100%;
z-index: 0;
background-color: grey;
opacity: 0.5;
}
.form-modal__body {
width: 270px;
min-height: 200px;
background: #363A4D;
border-radius: 20px;
padding: 48px 51px 41px 50px;
position: relative;
}
.form-modal__title {
font-size: 24px;
margin-bottom: 23px;
}
.close:before, .close:after {
position: absolute;
content: ' ';
right: 28px;
top: 16px;
height: 18px;
width: 2px;
background-color: #7E839A;
cursor: pointer;
border-radius: 5px;
}
.close:before {
transform: rotate(45deg);
}
.close:after {
transform: rotate(-45deg);
}
.form-modal__label {
margin-bottom: 6px;
}
const btnForm = document.getElementById('open');
const modal = document.getElementById('wrapperModal');
const overlay = document.getElementById('overlayModal');
const close = document.getElementById('close');
btnForm.addEventListener('click', (e) => {
e.preventDefault()
modal.classList.add('active');
});
const closeModal = () => {
modal.classList.remove('active');
}
overlay.addEventListener('click',closeModal);
close.addEventListener('click',closeModal);
Question
NEXTIK_S
Здравствуйте, снова! Недавно размещал вопрос о тесте на html. Теперь хочу спросить у тех кто знает JS и может представить графически алгоритм работы теста, просто от руки, вдруг кому-то не трудно и не лень помочь...
<SCRIPT language=JavaScript>
<!-- hide
var scrtxt = "Текст в бегущей строке" ;
var length = scrtxt.length;
var width = 100;
var pos = -(width + 2);
function scroll() {
pos++;
var scroller = "";
if (pos == length) {
pos = -(width + 2);
}
if (pos < 0) {
for (var i = 1; i <= Math.abs(pos); i++) {
scroller = scroller+" ";}
scroller = scroller + scrtxt.substring(0, width - i + 1);
}
else {
scroller = scroller + scrtxt.substring(pos, width + pos);
}
window.status = scroller;
setTimeout("scroll()", 100);
}
// -->
</SCRIPT>
<META content="MSHTML 6.00.2800.1081" name=GENERATOR></HEAD>
<BODY bgColor=orange onload=scroll()>
<SCRIPT language=JavaScript>
<!--Начало сценария
var res=" "
function check_me()
{
var count=0
with(document.test)
{
if (!Q1[0].checked&&!Q1[1].checked&&!Q1[2].checked&&!Q1[3].checked) {count+=1};
if (!Q2[0].checked&&!Q2[1].checked&&!Q2[2].checked&&!Q2[3].checked) {count+=1};
if (!Q3[0].checked&&!Q3[1].checked&&!Q3[2].checked&&!Q3[3].checked) {count+=1};
if (!Q4[0].checked&&!Q4[1].checked&&!Q4[2].checked&&!Q4[3].checked) {count+=1};
if (!Q5[0].checked&&!Q5[1].checked&&!Q5[2].checked&&!Q5[3].checked) {count+=1};
if (!Q6[0].checked&&!Q6[1].checked&&!Q6[2].checked&&!Q6[3].checked) {count+=1};
if (!Q7[0].checked&&!Q7[1].checked&&!Q7[2].checked&&!Q7[3].checked) {count+=1};
if (!Q8[0].checked&&!Q8[1].checked&&!Q8[2].checked&&!Q8[3].checked) {count+=1};
if (!Q9[0].checked&&!Q9[1].checked&&!Q9[2].checked&&!Q9[3].checked) {count+=1};
if (!Q10[0].checked&&!Q10[1].checked&&!Q10[2].checked&&!Q10[3].checked) {count+=1};
if (count>0) {alert("Вы выполнили не все задания. Проверьте себя.")}
else answer()
}
}
function control(k,f1,f2,f3,f4,f5,f6,f7,f8,f9,f10)
{
if (k==1&&f1.checked) return true;
if (k==2&&f2.checked) return true;
if (k==3&&f3.checked) return true;
if (k==4&&f4.checked) return true;
if (k==5&&f5.checked) return true;
if (k==6&&f6.checked) return true;
if (k==7&&f7.checked) return true;
if (k==8&&f8.checked) return true;
if (k==9&&f9.checked) return true;
if (k==10&&f10.checked) return true;
return false;
}
function answer()
{
answ="";
with(document)
{
answ+=control(res.charAt(0),test.Q1[0],test.Q1[1],test.Q1[2],test.Q1[3])?"1":"0"
answ+=control(res.charAt(1),test.Q2[0],test.Q2[1],test.Q2[2],test.Q2[3])?"1":"0"
answ+=control(res.charAt(2),test.Q3[0],test.Q3[1],test.Q3[2],test.Q3[3])?"1":"0"
answ+=control(res.charAt(3),test.Q4[0],test.Q4[1],test.Q4[2],test.Q4[3])?"1":"0"
answ+=control(res.charAt(4),test.Q5[0],test.Q5[1],test.Q5[2],test.Q5[3])?"1":"0"
answ+=control(res.charAt(5),test.Q6[0],test.Q6[1],test.Q6[2],test.Q6[3])?"1":"0"
answ+=control(res.charAt(6),test.Q7[0],test.Q7[1],test.Q7[2],test.Q7[3])?"1":"0"
answ+=control(res.charAt(7),test.Q8[0],test.Q8[1],test.Q8[2],test.Q8[3])?"1":"0"
answ+=control(res.charAt(8),test.Q9[0],test.Q9[1],test.Q9[2],test.Q9[3])?"1":"0"
answ+=control(res.charAt(9),test.Q10[0],test.Q10[1],test.Q10[2],test.Q10[3])?"1":"0"
showResult();
}
}
function showResult()
{
var nok=0;
var i,s;
for (i=0;i<answ.length;i++) {nok+=answ.charAt(i)=="1"?1:0;}
if(nok<=4) s='"НЕУДОВЛЕТВОРИТЕЛЬНО"';
if(nok>4 && nok<6) s='"УДОВЛЕТВОРИТЕЛЬНО"';
if(nok==6) s='"УДОВЛЕТВОРИТЕЛЬНО"';
if(nok>6 && nok<8) s='"ХОРОШО"';
if(nok==8) s='"ХОРОШО"';
if(nok>8) s='"ОТЛИЧНО"';
document.test.s1.value="Количество правильных ответов "+nok+". Ваша оценка "+s+". Загляните в окно рядом с номером задания. Если ответ правильный, то там (+). Если Вы ошиблись, там (-).";
with(document.test)
{
if (answ.charAt(0)=="1") {T1.value=" +"} else {T1.value=" -"};
if (answ.charAt(1)=="1") {T2.value=" +"} else {T2.value=" -"};
if (answ.charAt(2)=="1") {T3.value=" +"} else {T3.value=" -"};
if (answ.charAt(3)=="1") {T4.value=" +"} else {T4.value=" -"};
if (answ.charAt(4)=="1") {T5.value=" +"} else {T5.value=" -"};
if (answ.charAt(5)=="1") {T6.value=" +"} else {T6.value=" -"};
if (answ.charAt(6)=="1") {T7.value=" +"} else {T7.value=" -"};
if (answ.charAt(7)=="1") {T8.value=" +"} else {T8.value=" -"};
if (answ.charAt(8)=="1") {T9.value=" +"} else {T9.value=" -"};
if (answ.charAt(9)=="1") {T10.value=" +"} else {T10.value=" -"};
}
}
</SCRIPT>
<FORM name=test>
<CENTER><FONT face=Arial,Helvetica,sans-serif color=#000099>
<H3>Тема теста</H3></CENTER>
<OL>
<LI>
<H4><INPUT size=1 name=T1> Введите вопрос №1
</H4><INPUT type=radio name=Q1> Ответ №1 <BR><INPUT
type=radio name=Q1> Ответ №2 <BR><INPUT type=radio name=Q1>
Ответ №3 <BR><INPUT type=radio name=Q1> Ответ №4
<BR><BR>
<LI>
<H4><INPUT size=1 name=T2> Введите вопрос №2
</H4><INPUT type=radio name=Q2> Ответ №1 <BR><INPUT
type=radio name=Q2> Ответ №2 <BR><INPUT type=radio name=Q2> Ответ №3 <BR>
<INPUT type=radio name=Q2> Ответ №4 <BR><BR>
<LI>
<H4><INPUT size=1 name=T3> Введите вопрос №3
</H4><INPUT type=radio name=Q3> Ответ №1 <BR><INPUT type=radio name=Q3>Ответ №2
<BR><INPUT type=radio name=Q3> Ответ №3 <BR><INPUT type=radio name=Q3>
Ответ №4 <BR><BR>
<LI>
<H4><INPUT size=1 name=T4> Введите вопрос №4
</H4><INPUT type=radio name=Q4> Ответ №1 <BR><INPUT type=radio name=Q4>
Ответ №2<BR><INPUT type=radio name=Q4> Ответ №3
<BR><INPUT type=radio name=Q4> Ответ №4 <BR><BR>
<LI>
<H4><INPUT size=1 name=T5>Введите вопрос №5</H4><INPUT
type=radio name=Q5> Ответ №1 <BR><INPUT type=radio
name=Q5> Ответ №2 <BR><INPUT type=radio name=Q5> Ответ №3<BR>
<INPUT type=radio name=Q5> Ответ №4
<BR><BR>
<LI>
<H4><INPUT size=1 name=T6> Введите вопрос №6
</H4><INPUT type=radio name=Q6> Ответ №1<BR><INPUT type=radio name=Q6> Ответ №2<BR>
<INPUT type=radio name=Q6> Ответ №3 <BR><INPUT type=radio name=Q6> Ответ №4 <BR><BR>
<LI>
<H4><INPUT size=1 name=T7> Введите вопрос №7
</H4><INPUT type=radio name=Q7> Ответ №1<BR><INPUT type=radio name=Q7> Ответ №2 <BR>
<INPUT type=radio name=Q7> Ответ №3<BR><INPUT type=radio name=Q7>Ответ №4 <BR><BR>
<LI>
<H4><INPUT size=1 name=T8> Введите вопрос №8</H4>
<INPUT type=radio name=Q8>Ответ №1 <BR><INPUT type=radio
name=Q8> Ответ №2 <BR><INPUT
type=radio name=Q8> Ответ №3
<BR><INPUT type=radio name=Q8> Ответ №4
<BR><BR>
<LI>
<H4><INPUT size=1 name=T9> Введите вопрос №9</H4><INPUT type=radio name=Q9>
Ответ №1 <BR><INPUT
type=radio name=Q9> Ответ №2 <BR><INPUT type=radio name=Q9>
Ответ №3 <BR><INPUT type=radio name=Q9> Ответ №4 <BR><BR>
<LI>
<H4><INPUT size=1 name=T10> Введите вопрос №10</H4>
<INPUT type=radio name=Q10> Ответ №1
<BR><INPUT type=radio name=Q10> Ответ №2 <BR><INPUT type=radio name=Q10>
Ответ №3 <BR><INPUT type=radio name=Q10> Ответ №4
<BR></LI></OL><BR>
<CENTER>
<P><TEXTAREA name=s1 rows=4 cols=70> </TEXTAREA> </P><INPUT onclick=check_me() type=button value="Показать результат">
<INPUT type=reset value="Сбросить ответы"> </CENTER><BR><BR></FORM>
Link to comment
Share on other sites
0 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.