2013-11-11 16 views
-2

Я хочу показать и скрыть div с JavaScript. У кого-то есть дополнительный код? Это мой код до сих пор:Показать и скрыть div с помощью JavaScript

<script> 
window.onload=function(){$hide.div(div)}; 
</script> 

HTML:

<div class="overlay"></div> 
<div class="modal">I'm the modal window!</div> 

CSS:

.overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background-color: rgba(0,0,0,0.5); 
    z-index: 10; 
} 

.modal { 
    width: 300px; 
    height: 200px; 
    line-height: 200px; 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-top: -100px; 
    margin-left: -150px; 
    background-color: #f1c40f; 
    border-radius: 5px; 
    text-align: center; 
    z-index: 11; 
} 
+0

Где определяется '$ hide'? –

+0

Есть как минимум 3 примера, как это сделать -> – Liam

+0

Существует множество примеров как Google, так и StackOverflow о том, как показывать и скрыть divs с помощью javascript и как делать модальные диалоги. Посмотрите http://api.jquery.com/hide/ для стартеров ... –

ответ

2

Использование JavaScript:

<script> 
    window.onload=function(){ 
     for(var i = 0;i < document.getElementsByTagName("div").length;i++) { 
     document.getElementsByTagName("div")[i].style.visibility = "hidden"; 
     } 
    }; 
</script> 

Я рекомендую вам использовать jQuery:

<script> 
$(document).ready(function() { 
    $("div").hide(); 
}); 
</script> 
+2

Он не запрашивал jQuery – Liam

+0

jquery хороший, еще лучше –

+3

jquery тега там нет, и, конечно, он не спрашивал –

2

Просто используйте свойство CSS display для этого:

document.getElementsByClassName('modal')[0].style.display = 'none'; 

И показывать его снова:

document.getElementsByClassName('modal')[0].style.display = 'block'; 

jsFiddle

Смежные вопросы