модальные окна

G
На сайте с 24.04.2017
Offline
6
1173

есть меню модальных окон

<div class="meny">

<button onClick="document.getElementById('hide1').style.display='none';document.getElementById('hide2').style.display='none';

document.getElementById('hide3').style.display='none'; collapsElement('hide')">ОКНО1</button>

<button onClick="document.getElementById('hide').style.display='none';document.getElementById('hide2').style.display='none';

document.getElementById('hide3').style.display='none';collapsElement('hide1')">ОКНО2</button>

<button onClick="document.getElementById('hide').style.display='none';document.getElementById('hide1').style.display='none';

document.getElementById('hide3').style.display='none';collapsElement('hide2')">ОКНО3</button>

<button onClick="document.getElementById('hide').style.display='none';document.getElementById('hide1').style.display='none';

document.getElementById('hide2').style.display='none';collapsElement('hide3')">ОКНО4</button>

и так далее

</div>

можно ли сделать это как то сделать попроще

Sly32
На сайте с 29.03.2012
Offline
302
#1

что это за ужас??? что вам проще надо? может, сначала попробуете задать вопрос правильно?

tommy-gung
На сайте с 22.11.2006
Offline
287
#2


<div class="meny">
<button data-id="1" type="button">ОКНО1</button>
<button data-id="2" type="button">ОКНО2</button>
</div>

$('.meny [data-id]').click(function() {
var id = $(this).data('id');
$('#hide, #hide2..').hide(); //вот тут хз какая у тебя зависимость. принцип, думаю, понятен
collapsElement('hide' + id);
});

если не используется jquery, переписать без нее

Здесь не могла быть ваша реклама
I
На сайте с 03.01.2016
Offline
46
#3

<div class="meny">

<button onClick="hideElements('hide')">ОКНО1</button>
<button onClick="hideElements('hide1')">ОКНО2</button>
<button onClick="hideElements('hide2')">ОКНО3</button>
<button onClick="hideElements('hide3')">ОКНО4</button>
</div>

<script type="text/javascript">

function hideElements(hide_id)
{
var hides = ['hide', 'hide1', 'hide2', 'hide3'];
for(var i = 0; i < hides.length; i++)
{
if(hide_id !== hides)
{
document.getElementById(hides).style.display='none';
}
}
collapsElement(hide_id);
}

</script>
G
На сайте с 24.04.2017
Offline
6
#4

ivakol, Большое СПАСИБО очень помог

G
На сайте с 24.04.2017
Offline
6
#5

Спасибо ВСЕМ вот что получилось в итоге:

        <script language="" type="text/javascript">


function collapsElement(hide_id)
{
var el = document.getElementById(hide_id);
if ( el.style.display != "none" )
{
el.style.display = 'none';

}
else
{
el.style.display = '';

}
}
function hideElements(hide_id)
{
var hides = ['hide', 'hide1', 'hide2', 'hide3', 'hide4'];
for(var i = 0; i < hides.length; i++)
{
if(hide_id !== hides)
{
document.getElementById(hides).style.display='none';
}
}
collapsElement(hide_id);
}

</script>
<style>
.zet {

margin: 0 auto;
position: relative;
height: auto;
width: 100%;
text-align: center;

}

.div {
background-color: #ff5a00;
margin: 0 auto;
position: relative;
overflow: auto;
height: 500;
width: 300;
border:1px solid black;
border-radius: 12px;
}
.div1{

background-color: #ff5a00;
margin: 0 auto;
position: relative;
overflow: auto;
height: 400;
width: 400;
border:1px solid black;
border-radius: 12px;
}
.div2{

background-color: #ff5a00;
margin: 0 auto;
position: relative;
overflow: auto;
height: 300;
width:500;
border:1px solid black;
border-radius: 12px;
}
.div3{

background-color: #ff5a00;
margin: 0 auto;
position: relative;
overflow: auto;
height: 200;
width:600;
border:1px solid black;
border-radius: 12px;
}
.div4{

background-color: #ff5a00;
margin: 0 auto;
position: relative;
overflow: auto;
height:100;
width:700;
border:1px solid black;
border-radius: 12px;
}

.meny {
margin: 0 auto;
text-align: center;
padding: 10px;
height: 20px;
width: auto;
border:0px solid black;
border-radius: 12px;
background-color: #3333FF;
}
#close {
cursor: pointer;
position: absolute;
width: 23px;
height: 23px;
top: 17px;
right: 17px;
display: block;
}
</style>
<div class="meny">
<button onClick="hideElements('hide')">ОКНО1</button>
<button onClick="hideElements('hide1')">ОКНО2</button>
<button onClick="hideElements('hide2')">ОКНО3</button>
<button onClick="hideElements('hide3')">ОКНО4</button>
<button onClick="hideElements('hide4')">ОКНО5</button>
</div>


<div class="zet">
<div id="hide"style="display:none"class="div">
<a onClick="document.getElementById('hide').style.display='none';return false;" title="Закрыть окно" id="close">
Х
</a>
Скрытый текст
</div>
<div id="hide1"style="display:none"class="div1">
<a onClick="document.getElementById('hide1').style.display='none';return false;" title="Закрыть окно" id="close">
Х
</a>
текст
</div>
<div id="hide2"style="display:none"class="div2">
<a onClick="document.getElementById('hide2').style.display='none';return false;" title="Закрыть окно" id="close">
Х
</a>
текст +
</div>
<div id="hide3"style="display:none"class="div3">
<a onClick="document.getElementById('hide3').style.display='none';return false;" title="Закрыть окно" id="close">
Х
</a>
текст + +
</div>
<div id="hide4"style="display:none"class="div4">
<a onClick="document.getElementById('hide4').style.display='none';return false;" title="Закрыть окно" id="close">
Х
</a>
текст + + +
</div>
</div>
ZT
На сайте с 24.07.2012
Offline
39
#6

Что-то стоит ещё над кодом поработать.

id="close" повторяется. Айди должен быть уникальным на странице.

<a onClick="document.getElementById....

тоже можно вынести в функцию.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий