JS показать / скрыть блок div

Question

[netz-sanya]

Скажите, что делаю не так?

После нажатия "open_modal_sms" modal_sms и modal_overlay_bg сразу закрываются

<script>
$(document).ready(function() {
    document.getElementById('modal_overlay_bg').style.display='none';
    document.getElementById('modal_sms').style.display='none';
})


function close_modal_sms() {
    document.getElementById('modal_overlay_bg').style.display='none';
    document.getElementById('modal_sms').style.display='none';
   }


function open_modal_sms() {
    document.getElementById('modal_overlay_bg').style.display='block';
    document.getElementById('modal_sms').style.display='block';
   }
</script>



<div id="modal_overlay_bg" OnClick="close_modal_sms();" class="modal_overlay"></div>
<div id="modal_sms" class="modal_sms">


<div id="">
</div>



</div>

вызывается:

<a href="" OnClick="open_modal_sms();"><li>Сообщения</li></a>

Comments

[CGS]

А где или как вызывается open_modal_sms() ?

Answer 1

[Юрий Лобанов]

Полагаю, тут где-то есть ссылка? )

Comments

[netz-sanya]

Забыл обозначить код ))

Answer 2

[netz-sanya]

<a href="" OnClick="open_modal_sms();"><li>Сообщения</li></a>

Изменил на

<a href="#" OnClick="open_modal_sms();"><li>Сообщения</li></a>

и стало все нормально открываться. Подскажите, почему?

Comments

[Михаил Шатилов]

Может потому, что идет переход по ссылке? Блин, ну хватит идиотских вопросов, а.

[Facetrollex]

@netz-sanya все равно идет переход по ссылке, в твоем случае на "#"

хочешь чтобы не было перехода?

<a href="any link" onclick="open_modal_sms();return false;"><li>Сообщения</li></a>

Answer 3

[Иван Беленков]

Объясню, что делаете не так. Когда вы кликаете по ссылке, происходит т.н. «всплытие события». Т.е. клик по ссылке --> перехода не произошло --> клик по родителю ссылки --> перехода не произошло --> клик по родителю родителя ссылки --> ... ---> клик по всей области документа. Сейчас вы добавили href = "#" , таким образом происходит переход по ссылке-якорю и всё нормально до тех пор, пока вам не понадобится открыть модальное окно где-нибудь внизу документа, в том случае вы увидите, что весь документ у вас прокручивается вверх. Попробуем оптимизировать:

/* 
это фрагмент не нужен, на самом деле. просто пропишите в css display:none для этих элементов, и добавьте класс visible с display:block;
*/
//удалить
$(document).ready(function() {
    document.getElementById('modal_overlay_bg').style.display='none';
    document.getElementById('modal_sms').style.display='none';
})
//удалить

//Идем далее

/* открываем окно*/

$("html").on("click", ".open_modal_sms",function(e) {
    $('#modal_overlay_bg').addClass('visible');
    $('#modal_sms').addClass('visible');
    e.stopPropagation(); //останавливаем всплытие
}); 

/* закрываем окно */

$('html').on('click', function() {
   $('.visible').removeClass('visible');
});

Посмотрим CSS:

#modal_overlay_bg,
#modal_sms {
    display:none;
}

#modal_overlay_bg.visible,
#modal_sms.visible {
    display:block;
}

Ну и HTML для вызова:

<!-- И ни в коем случае не вставляйте li в ссылку, как сделано у вас, это bad practice -->
<li><a href="#" class="open_modal_sms">Сообщения</a></li>