Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
vsilya
0 / 0 / 0
Регистрация: 01.09.2016
Сообщений: 1
1

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

14.02.2017, 15:03. Просмотров 394. Ответов 2
Метки нет (Все метки)

Добрый день! Делаю всплывающее окно по нажатию на кнопку. Код такой:
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;          
            }
Прошу помощи. Если будет не очень трудно, объясните, пожалуйста, в чём я совершаю ошибку. Присутствует стремление понять принцип работы.

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
14.02.2017, 15:03
Ответы с готовыми решениями:

Всплывающее окно для подтверждения
Привет! Подскажите пожалуйста, как сделать на JavaScript или где посмотреть. Необходимо что бы...

Всплывающее окно для ввода в Input значений
Доброго времени суток! Вопрос такой:есть такой код: &lt;table width=&quot;327&quot; border=&quot;0&quot;...

Всплывающее окно при входе на сайт (windows окно)
Как сделать чтобы при переходе на страницу появлялось такое же всплывающее окно как здесь? ...

Всплывающее окно.
Здравствуйте. Подскажите, пожалуйста, как добиться данного эффекта: При клике на ссылку по...

Всплывающее окно
Может кто-нибудь сделать всплывающее окошко на аяксе, после отправки формы обратной связи? Вот...

2
Опан
Юзер с абсолютным слухом
597 / 403 / 166
Регистрация: 17.12.2010
Сообщений: 1,199
20.02.2017, 12:30 2
Javascript
1
document.getElementById('window' + id).style.display = state;
0
kalabuni
супермизантроп
Эксперт JS
3401 / 2699 / 646
Регистрация: 18.04.2012
Сообщений: 8,215
20.02.2017, 12:59 3
ваш javascript-код встраивается в объект document, который, в свою очередь, открывается в окне браузера, называемое объектом window
очень плохим тоном является именование ваших переменных именами, уже используемыми в среде, в которую встроен ваш код -- в таком коде трудно будет разбираться не только кому-то постороннему, но и вам самому

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

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

вы никогда не разберётесь в яваскрипте, если будете использовать неверные термины
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
20.02.2017, 12:59

Всплывающее окно
Ребят подскажите.на сайте http://verst.web-prostor.ru есть всплывающее окно бронирования.при...

Всплывающее окно
Добрый день, объясните пожалуйста как работает всплывающее окно со стороны работы сайта, вот сайт...

Всплывающее окно
Здравствуйте, столкнулся с такой проблемой у меня есть страница, с кнопкой и передачей данных ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru