Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
SunEclipse
232 / 181 / 104
Регистрация: 19.03.2010
Сообщений: 949
#1

"Защита" на нажатие одного блока от другого

24.08.2013, 20:06. Просмотров 429. Ответов 3
Метки нет (Все метки)

Добрый день уважаемые форумчане. Начал верстать сайт и столкнулся с такой проблемой: есть блок, в котором хранится форма для ввода данных:
HTML5
1
2
3
4
5
6
7
8
<div id="hidden">
    <form action="mail.php" method="POST">
        <input type="text" required placeholder="ФИО" id="name1">
        <input type="text" required placeholder="Телефон" id="phone1">
        <input type="text" required placeholder="Email" id="email1"><br/>
        <input type="submit" id="submit1">
    </form>
</div>
Также есть таблица стилей к этому блоку:
CSS
1
2
3
4
5
6
7
8
9
 #hidden{
            position: absolute;
            height: 380px;
            width: 320px;
            background: #1fbba6;
            top:15em;
            left:30em;
            display:none;
        }
Но есть и еще один блок, который является тенью прошлого блока:
HTML5
1
<div id="back" onclick="this.style.display='none'; document.getElementById('hidden').style.display = 'none';"></div>
Его таблица стилей:
CSS
1
2
3
4
5
6
7
8
9
        #back{
            background:rgba(0,0,0,0.5);
            width:100%;
            height:3600px;
            position:absolute;
            left:0;
            top:0;
            display:none;
        }
Также еще есть ссылка, которая вызывает функцию JavaScript:
HTML5
1
<a href="#" onclick="hiddenBlock()"><img src="img/call_button.png" alt="Call button" id="call_button" align="right"/></a>
. Она вызывает вот эту функцию:
Javascript
1
2
3
4
5
        function hiddenBlock ()
        {
            document.getElementById('hidden').style.display = 'inline';
            document.getElementById('back').style.display = 'inline';
        }
В двух словах что выполняется: при нажатии на ссылку вызывается два блока, hidden и back. Hidden является блоком с формой, а back - типо тенью. При нажатии на поле блока ввода, либо на сам блок hidden исчезают все блоки, хотя событие стоит на нажатие блока back. Собственно САБЖ: как "оградить" блок hidden от блока back?

Заранее огромное спасибо!
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
24.08.2013, 20:06
Ответы с готовыми решениями:

Как поменять нажатие "Enter" на нажатие "Tab" ?
На форме есть несколько текстовых полей и кнопок. Подскажите пожалуйста, как...

Как написать регулярное выражение для выдергивания английских букв и символов: "+", ",", ":", "-", " ", "!", "?" и "."
Не могу ни как собразить как написать регулярное выражение для выдергивания...

Получить значение из {"text1":"val1","text2":"val2","text3":{"text":"val"}}
Есть такая строка var my =...

Плавное движение блока "А" вправо при нажатии на блок "Б". Реализация на чистом JS
Здравствуйте. Собственно все что необходимо указано в заголовке. Есть блок,...

На экране расположены текст и две кнопки с надписями "красный" и "зеленый". Нажатие на эти кнопки приводит к соответствующему изменению цвета текста.
На экране расположены текст и две кнопки с надписями &quot;красный&quot; и &quot;зеленый&quot;....

3
vovandr
630 / 518 / 194
Регистрация: 19.08.2013
Сообщений: 1,400
24.08.2013, 20:20 #2
CSS
1
2
3
4
5
6
7
8
9
10
#hidden{
    position: absolute;
    height: 380px;
    width: 320px;
    background: #1fbba6;
    top:15em;
    left:30em;
    display:none;
    z-index: 2;
}
1
SunEclipse
232 / 181 / 104
Регистрация: 19.03.2010
Сообщений: 949
24.08.2013, 20:30  [ТС] #3
vovandr, огромнейшее спасибо!
Еще есть один небольшой вопрос: как сделать плавное появление и исчезновение блока?
0
vovandr
630 / 518 / 194
Регистрация: 19.08.2013
Сообщений: 1,400
24.08.2013, 20:47 #4
Ну можно так (судя по вашему коду я не стал создавать функции а просто написал в формате инлайнового стиля, хотя рекомендую так не делать и потом этот код переписать):
Javascript
1
2
3
4
5
6
7
8
 function hiddenBlock (){
        
        document.getElementById('hidden').style.height = 'auto';
        document.getElementById('back').style.height = '100%';
        document.getElementById('hidden').style.opacity = '1';
        document.getElementById('back').style.opacity = '1';
        
        }
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
  #hidden{
    position: absolute;
    height: 380px;
    width: 320px;
    background: #1fbba6;
    top:15em;
    left:30em;
    height: 0;
    z-index: 2;
    opacity: 0;
    -webkit-transition: opacity linear .3s;
    -moz-transition: opacity linear .3s;
    -ms-transition: opacity linear .3s;
    -o-transition: opacity linear .3s;
    transition: opacity linear .3s;
}
 #back{
    background:rgba(0,0,0,0.5);
    width:100%;
    height:3600px;
    position:absolute;
    left:0;
    top:0;
    height: 0;
    opacity: 0;
    -webkit-transition: opacity linear .6s;
    -moz-transition: opacity linear .6s;
    -ms-transition: opacity linear .6s;
    -o-transition: opacity linear .6s;
    transition: opacity linear .6s;
}
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div id="hidden">
        <form action="mail.php" method="POST">
            <input type="text" required placeholder="ФИО" id="name1">
            <input type="text" required placeholder="Телефон" id="phone1">
            <input type="text" required placeholder="Email" id="email1"><br/>
            <input type="submit" id="submit1">
        </form>
    </div>
 
    <div id="back" onclick="this.style.height='0'; document.getElementById('hidden').style.height = '0';document.getElementById('hidden').style.opacity = '0';"></div>
 
    <a href="#" onclick="hiddenBlock();return false;"><img src="img/call_button.png" alt="Call button" id="call_button" align="right"/></a>
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
24.08.2013, 20:47

Создание браузерной CAD, "math scetchpad", "Geogebra", "Живая геометрия""
Создаю браузерную версию CAD системы, для обучения школьников стереометрии и...

Автоматическое нажатие на button type="submit" при загрузке страницы
глубокоуважаемое сообщество, не будете ли вы столь снихсодительны к малоопытным...

Очень нужен метод!, как можно определить нажатие на кнопку "Like" от FaceBook'a?
Доброго времени суток. Очень нужен метод!!!, как можно определить нажатие на...


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

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

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