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

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

Помогите пожалуйста к скрипту добавить "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.

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

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

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

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

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

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

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

Да. Именно так

Где класс?Что мешает написать
<a href="#" id="myBtn" class="showmod">

Ну не хотите, как хотите

Да и не интересен ваш css
Что бы помочь, интересен html, со всеми ссылками кнопками (кстати, почему <a>, а не <button>?), и контейнером, где они находятся

remmas,

<!DOCTYPE html>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .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
            }
        }

        .modal.open {
            display: block;
        }
    </style>

    <script>
        document.addEventListener("click", ({
            target
        }) => {
            let elem;
            if (elem = target.closest("a.btn_modal")) myModal.classList.add("open");
            if (elem = target.closest("#myModal .close") || target == myModal) myModal.classList.remove("open");
        })
    </script>
</head>

<body>
    <a href="#" id="myBtn" class="btn_modal">Модальное окно</a>
    <a href="#" id="myBtn1" class="btn_modal">Модальное окно</a>
    <a href="#" id="myBtn2" class="btn_modal">Модальное окно</a>
    <a href="#" id="myBtn3" class="btn_modal">Модальное окно</a>
    <a href="#" id="myBtn4" class="btn_modal">Модальное окно</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>
    </div>

</body>

</html>

тук

Сайт собирался на этом конструкторе

Все супер с скриптом, вот только работает один раз. Когда кликаю еще раз, то не вызывает повторно форму:no: Чтобы повторно открыть, то приходится обновлять страницу

remmas,
можно только гадать, что у вас не так.

Да нет.. Все так.. Просто убрал с ссылки href"#" и все заработало. Огромнейшее спасибо:)

как вариант ...

document.addEventListener("click", event => {
            let elem, {target} = event;
            if (elem = target.closest("a.btn_modal")) {
            event.preventDefault();
            myModal.classList.add("open");
            };
            if (elem = target.closest("#myModal .close") || target == myModal) myModal.classList.remove("open");
        })