Свое всплывающее окно для каждого окна

@vsilya · Регистрация: 01.09.2016

Студворк — интернет-сервис помощи студентам

Добрый день! Делаю всплывающее окно по нажатию на кнопку. Код такой:

JavaScript
1
2
3
4
5
6
7
8
        <script type="text/javascript">
 
            function show(state){
                    document.getElementById('window').style.display = state;            
                    document.getElementById('wrap').style.display = state;          
            }
            
        </script>

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
                    <!-- Задний прозрачный фон-->
        <div onclick="show('none')" id="wrap"></div>
 
                    <!-- Само окно-->
            <div id="window">
                        
                         <!-- Картинка крестика-->
                <img class="close" onclick="show('none')" src="http://sergey-oganesyan.ru/wp-content/uploads/2014/01/close.png">
                    
                        <!-- Слайдер -->
                <p>First slider</p>
            </div>
                
        </div>
 
 
        <center><button class="myButton" onclick="show('block')">Показать окно</button></center>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
    #wrap{
        display: none;
        opacity: 0.8;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        padding: 16px;
        background-color: rgba(1, 1, 1, 0.725);
        z-index: 100;
        overflow: auto;
    }
    
    #window{
        width: 400px;
        height: 400px;
        margin: 50px auto;
        display: none;
        background: #fff;
        z-index: 200;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        padding: 16px;
    }
    
    .close{
        margin-left: 364px;
        margin-top: 4px;
        cursor: pointer;
    }

Вопрос таков: если у меня не одна такая кнопка, а несколько, и в соответствии с нажатой кнопкой надо открывать определённое всплывающее окно, как это реализовать?
Я допёр только до того, что каждой кнопке можно присваивать id. Например, так:

HTML5
1
2
        <center><button class="myButton" onclick="show('block',1)">Показать окно 1</button></center>
        <center><button class="myButton" onclick="show('block',2)">Показать окно 2</button></center>

id div'ам присвоить тоже по номерам, нампимер window1, window2 и тд. Но как изменить скрипт для того, чтоб он открывал определённый window?
Мои глубочайшие размышления привели лишь к такому унылому варианту, но опять же не хватает знаний:

CSS
1
2
3
4
            function show(state,id){
                    document.getElementById('window'+[тут что-то надо добавить?]).style.display = state;            
                    document.getElementById('wrap').style.display = state;          
            }

Прошу помощи. Если будет не очень трудно, объясните, пожалуйста, в чём я совершаю ошибку. Присутствует стремление понять принцип работы.

@Опан · 20.02.2017, 12:30

JavaScript
1
document.getElementById('window' + id).style.display = state;

@kalabuni · 20.02.2017, 12:59

ваш javascript-код встраивается в объект document, который, в свою очередь, открывается в окне браузера, называемое объектом window
очень плохим тоном является именование ваших переменных именами, уже используемыми в среде, в которую встроен ваш код -- в таком коде трудно будет разбираться не только кому-то постороннему, но и вам самому

в методе window.open () вторым параметром следует вписывать выдуманное вами имя открываемого окна
если откроете в первый раз страницу Гугля в окне window.open ('http://google.com', 'forSearch'), а потом захотите в этом же окне открыть Яндекс, то прописать надо будет window.open ('http://yandex.ru', 'forSearch')

именно такая штука, о которой я написал выше, называется окном
всё прочее всплывающее следует именовать контейнером

вы никогда не разберётесь в яваскрипте, если будете использовать неверные термины

Новые блоги и статьи Все статьи Все блоги /
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	20.02.2017, 12:59
	ваш javascript-код встраивается в объект document, который, в свою очередь, открывается в окне браузера, называемое объектом window очень плохим тоном является именование ваших переменных именами, уже используемыми в среде, в которую встроен ваш код -- в таком коде трудно будет разбираться не только кому-то постороннему, но и вам самому в методе window.open () вторым параметром следует вписывать выдуманное вами имя открываемого окна если откроете в первый раз страницу Гугля в окне window.open ('http://google.com', 'forSearch'), а потом захотите в этом же окне открыть Яндекс, то прописать надо будет window.open ('http://yandex.ru', 'forSearch') именно такая штука, о которой я написал выше, называется окном всё прочее всплывающее следует именовать контейнером вы никогда не разберётесь в яваскрипте, если будете использовать неверные термины 0