Дополнение к действию JS

[remmas]

Доброго времени суток!!!
Нужна помощь к дополнению к скрипту функции вызовов, которые будут отвечать за вызов модальных окон с разных ссылок.

Помогите пожалуйста к скрипту добавить "myBtn1","myBtn2","myBtn3" ..... и т.д.

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 (n) {
	n.target == modal && (modal.style.display = "none")
};

[рони]

remmas,
медитировать тут если не поможет, делайте макет, только class и никаких id.

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

[remmas]

remmas,
только class и никаких id.

Дело в том что у меня на сайте стоит скрипт плавной прокрутки к якорю и class со своим # подходит

[рони]

remmas,
что мешает всем "myBtn1","myBtn2","myBtn3" добавить ещё и общий класс?

[рони]

remmas,
форум - поиск - открывашка

[remmas]

remmas,
форум - поиск - открывашка

А подсказать как сделать скрипт нельзя, или помочь с решением вопроса, а не балобольством заниматсься? Ну так и напишите, что на данном форуме, тупо бла-бла-бла и всего-лишь

[remmas]

remmas,
что мешает всем "myBtn1","myBtn2","myBtn3" добавить ещё и общий класс?

Класс ссылке (кнопки) уже прописан. Если бы я хотел прописать классы то сюда с вопросом не пришел

[рони]

подсказать как сделать скрипт

то что вам нужно, уже есть на форуме в количестве более 400 вариантов, ищите по слову открывашка или пишите ваш html.

[remmas]

Это работает на одну ссылку в которой стоит 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>

[рони]

remmas,
все кнопки будут открывать одно и тоже модальное окно?