Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Нужна помощь по Модальному окне js (https://javascript.ru/forum/misc/56081-nuzhna-pomoshh-po-modalnomu-okne-js.html)

1Feniks1 28.05.2015 19:55

Нужна помощь по Модальному окне js
 
<script>
function toggle(el) {
el.style.display = (el.style.display == 'none') ? '' : 'none'
}
function modal(el) {
el.style.display = (el.style.display == 'none') ? '' : 'none'
}
</script>

<ul>
     <li><a onclick="toggle(hidden_content)" href="#">Ответы<span class="activ">(+1)</span></a></li>
</ul>
<p onclick= "modal(mod_okno)" >Пробный текст</p>
<div id="mod_okno" style="display: none;">
<form>
<textarea name="message"> </textarea>
</form>
</div>

В случае если пропишу еще один раз второй код он не работает!
Пример вот так этот код уже не работает:
<script>
function toggle(el) {
el.style.display = (el.style.display == 'none') ? '' : 'none'
}
function modal(el) {
el.style.display = (el.style.display == 'none') ? '' : 'none'
}
</script>

<li><a onclick="toggle(hidden_content)" href="#">Ответы<span class="activ">(+1)</span></a></li>
<p onclick= "modal(mod_okno)" >Пробный текст</p>
<div id="mod_okno" style="display: none;">
<form>
<textarea name="message"> </textarea>
</form>
</div> 
<div id="mod_okno" style="display: none;">
<form>
<textarea name="message"> </textarea>
</form>
</div>

KosBeg 28.05.2015 20:40

ID должен быть уникальный!
а в втором варианте
1) <div id="mod_okno" style="display: none;">
2) <div id="mod_okno" style="display: none;">
дважды используется id="mod_okno"
используйте класы!

<p onclick= "modal(document.getElementsByClassName('mod_okno_1')[0])" >Пробный текст 1</p>
<div class="mod_okno_1" style="display: none;">
<form>
<textarea name="message"> </textarea>
</form>
</div> 
<p onclick= "modal(document.getElementsByClassName('mod_okno_2')[0])" >Пробный текст 2</p>
<div class="mod_okno_2" style="display: none;">
<form>
<textarea name="message"> </textarea>
</form>
</div>

<script>
function toggle(el) {
  el.style.display = (el.style.display == 'none') ? '' : 'none'
}

function modal(el) {
  el.style.display = (el.style.display == 'none') ? '' : 'none'
}
</script>

1Feniks1 28.05.2015 21:02

То для каждого окна который будет добавляться нужно еще писать другой class?

KosBeg 28.05.2015 21:32

Цитата:

Сообщение от 1Feniks1
То для каждого окна который будет добавляться нужно еще писать другой class?

в КАЖДОГО окна должен быть УНИКАЛЬНЫЙ ID, а если это КЛАСЫ то можно и не уникальниый
я на быструю руку написал через класы, можно и через ID, но если это ID - ОН ОБИЗАТЕЛЬНО ДОЛЖЕН БЫТЬ УНИКАЛЬНЫЙ
<p onclick= "modal(mod_okno_1)" >Пробный текст 1</p>
<div id="mod_okno_1" style="display: none;">
<form>
<textarea name="message"> </textarea>
</form>
</div> 
<p onclick= "modal(mod_okno_2)" >Пробный текст 2</p>
<div id="mod_okno_2" style="display: none;">
<form>
<textarea name="message"> </textarea>
</form>
</div>

<script>
function toggle(el) {
  el.style.display = (el.style.display == 'none') ? '' : 'none'
}

function modal(el) {
  el.style.display = (el.style.display == 'none') ? '' : 'none'
}
</script>

1Feniks1 28.05.2015 21:41

Угу! Ну спасибо! Очень хорошо ты мне помог! Я уже весь день искал..! Спасибо еще раз!
Ну я дальше писать :write:
А тебе +

demoniqus 29.05.2015 09:52

5 копеек про ID - обработка зависит от браузера. Некоторые браузеры в случае неуникальных ID берут первый попавшийся, а некоторые вообще посылают к рогатому вся и всех. Поэтому ID стоит лишний раз не использовать, если есть сомнения в его будущей уникальности...


Часовой пояс GMT +3, время: 02:13.