Modal não esta aparecendo

Front-end JavaScript
#1

boa tarde galera estou há ler alguns livros e nele vem a implementação de um modal. Mas acredito que estou fazendo algo errado pois não consigo chamar o mesmo.

html

[code] Exibir Modal.

Atenção

Aqui você pode exibir algumas mensagens importantes, que ela irá sobrepor todo o conteudo do seu site.

[/code]

css

[code]
.notice{
background: #fff;
border: 1px solid #000;
height: 130px;
width: 380px;
padding: 10px;

position: fixed;
top: 50%;
left: 50%;
margin: -75px 0 0 -200px;
z-index: 1;
}

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

.overlay, .notice{
display: none;
}

javascript

$('#show-modal').on('click',function(){
	$('.overlay, .notice').show();
});

lembrando que estou fazendo apenas tudo isso em uma pagina html, não chamei css e javascript externos. E quando clico no link nao ocorre nada

#2

Olá @tucupi.
Seu código parece estar funcionando normalmente:
Talvez apenas tenha faltado chamar o jQuery.

jsFiddle

Abs.