Показать сообщение отдельно
  #9 (permalink)  
Старый 06.08.2021, 20:13
Новичок на форуме
Отправить личное сообщение для remmas Посмотреть профиль Найти все сообщения от remmas
 
Регистрация: 06.08.2021
Сообщений: 9

Это работает на одну ссылку в которой стоит id="myBtn"
Если этот id ставить на вторую ссылку, то работать не будет вызов модального окна


var modal=document.getElementById("myModal"),btn=document.getElementById("myBtn"),span=document.getElementsByClassName("close")[0];btn.onclick=function(){modal.style.display="block"},span.onclick=function(){modal.style.display="none"},window.onclick=function(a){a.target==modal&&(modal.style.display="none")};


.modal{display:none;position:fixed;z-index:999;padding-top:100px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,0.4)}
.modal-content{position:relative;background-color:#EAE5E5;margin:auto;padding:0;border:1px solid #444;width:33%;box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);-webkit-animation-name:animatetop;-webkit-animation-duration:.4s;animation-name:animatetop;animation-duration:.4s}
.modal-content h2,h3{font-weight:400;font-size:14px;line-height:1.1}
.modal-body-text{color:#514f4f;font-size:14px;text-align:center;padding:20px 16px}
.contact{max-width:467px;min-width:320px}
.contact *{outline:none;border:0;background:none}
form fieldset{display:block;padding:25px 30px}
form .col-2{width:100%}
form .row:after{content:'';display:table;clear:both}
form section{margin-bottom:20px}
form .input,form .textarea,form .radio,form .checkbox,form .button{position:relative;display:block}
form .fa-append{position:absolute;top:5px;right:5px;width:29px;height:29px; padding-left:3px;border-left:1px solid #e5e5e5;font-size:15px;line-height:29px;text-align:center;color:#ccc}
form .input .fa-append + input,form .textarea .fa-append + textarea{padding-right:46px}
form .input input,form .textarea textarea{display:block; box-sizing:border-box;-moz-box-sizing:border-box;width:100%;height:50px; padding:10px;outline:none;border:1px solid #e5e5e5;border-radius:0;background:#fff;font:13px/19px 'Open Sans',Helvetica,Arial,sans-serif;color:#404040;appearance:normal; -moz-appearance:none;-webkit-appearance:none;transition:border-color .3s; -o-transition:border-color .3s;-ms-transition:border-color .3s;-moz-transition:border-color .3s;-webkit-transition:border-color .3s}
form .input:hover input,form .textarea:hover textarea,form .checkbox:hover i{border-color:#00BDAB}
form .input input:focus,form .textarea textarea:focus,form .checkbox input:focus + i{border-color:#009688}
form .button{float:right;height:39px;overflow:hidden;margin-left:20px; padding:0 20px;outline:none;border:0;background-color:#ff0202;font:300 13px/39px 'Open Sans',Helvetica,Arial,sans-serif; text-decoration:none;color:#fff;cursor:pointer;opacity:.8;transition:opacity .2s; -o-transition:opacity .2s;-ms-transition:opacity .2s;-moz-transition:opacity .2s;-webkit-transition:opacity .2s}
form .button:hover{opacity:1}

@-webkit-keyframes animatetop {
from{top:-300px;opacity:0}
to{top:0;opacity:1}
}
@keyframes animatetop {
from{top:-300px;opacity:0}
to{top:0;opacity:1}
}
.modal-header{padding:2px 16px;background-color:#EAE5E5;color:#514f4f;border-bottom:1px solid #d2c7c7}
.modal-body{padding:2px 8px}
.modal-footer{padding:2px 8px;background-color:#EAE5E5;color:#514f4f;border-top:1px solid #d2c7c7;padding:10px 15px;font-size:8px;text-align:center}
.close{color:#444;float:right;font-size:28px;font-weight:700}
.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}
@media (max-width: 991px) {
.modal-content{width:85%}
}
@media (max-width: 767px) {
.modal-content{width:50%}
}
@media (max-width: 575px) {
.modal-content{width:75%}
}
@media (max-width: 420px) {
.modal-content{width:95%}
.modal-body{padding:0}
.modal-footer,.modal-content h2{font-size:10px}
}

@media screen and (max-width: 470px) {
.col,.col-2{float:none!important;width:100%!important}
}


<a href="#" id="myBtn">Модальное окно</a>

<div id="myModal" class="modal">
 <div class="modal-content">
 <div class="modal-header"> <span class="close">&times;</span>
 <h2>Верх окна</h2> </div>
 <div class="modal-body">
Текст окна
</div>
 <div class="modal-footer">Футер</div>
</div>
Ответить с цитированием