Форум программистов, компьютерный форум, киберфорум
Наши страницы

JavaScript

Войти
Регистрация
Восстановить пароль
 
SunEclipse
232 / 181 / 40
Регистрация: 19.03.2010
Сообщений: 949
#1

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

24.08.2013, 20:06. Просмотров 421. Ответов 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
Я подобрал для вас темы с готовыми решениями и ответами на вопрос "Защита" на нажатие одного блока от другого (JavaScript):

Как поменять нажатие "Enter" на нажатие "Tab" ? - JavaScript
На форме есть несколько текстовых полей и кнопок. Подскажите пожалуйста, как сделать, чтобы по нажатию 'Enter' курсор перемещался в другое...

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

Получить значение из {"text1":"val1","text2":"val2","text3":{"text":"val"}} - JavaScript
Есть такая строка var my = '{&quot;text1&quot;:&quot;val1&quot;,&quot;text2&quot;:&quot;val2&quot;,&quot;text3&quot;:{&quot;text&quot;:&quot;val&quot;}}'; Как из нее извлечь значение val ? var obj = ??? ...

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

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

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

3
vovandr
629 / 517 / 139
Регистрация: 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 / 40
Регистрация: 19.03.2010
Сообщений: 949
24.08.2013, 20:30  [ТС] #3
vovandr, огромнейшее спасибо!
Еще есть один небольшой вопрос: как сделать плавное появление и исчезновение блока?
0
vovandr
629 / 517 / 139
Регистрация: 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
Привет! Вот еще темы с ответами:

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

Отловить нажатие "лайк" и перебросить на страницу - JavaScript
Ребят всем привет! В ява скриптах не особо силен, вернее совсем не силен. У меня есть хтмл страничка, и на ней блок кнопок лайков...

Привязка блока к бегунку input[type="range"] - JavaScript
Товарищи, такой вопрос. Есть &lt;input type=&quot;range&quot;&gt;. На нем есть бегунок. Под инпутом есть блок с надписью. Как сделать, чтобы блок двигался...

Подсчет "Мне нравится" Вк с определенного блока - JavaScript
Привет! Нужно сделать подсчет &quot;Мне нравится&quot; Вк с определенного блока на стороннем сайте. Вот например такой блок лайков: &lt;div...


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

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

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