As modais são feitas integralmente no padrão Bootstrap. Qualquer dúvida, você pode ver como é feito aqui.

O link tem alguns atributos que precisam estar presentes para que a modal seja chamada. Um deles é o data-toggle="modal", que faz o javascript encontrar o elemento com o nome MODAL, e o atributo data-target="#modalEditarNome", que pega o ID específico da modal que deverá ser chamada.

Teste a modal aqui!

O tamanho padrão das modais é de 550px de largura. Existe um outro tamanho menor, com 450px de largura, geralmente utilizado para mostrar mensagens de excluir e de alertas. Pra fazer essas modais menores, basta colocar a classe modalSmall na div MODAL.

São dois tamanhos de modais. Para fazer uma modal menor, é só usar a classe modalSmall. Veja o exemplo de tamanho das duas modais abaixo.

<div class="modal in fade" role="dialog" aria-labelledby="id_titulo" aria-live="polite">
	<div class="modal-header">
		<button type="button" aria-label="Fechar Modal" class="close" data-dismiss="modal">×</button>
		<h3 id="id_titulo" >Título da Modal</h3>
	</div>
	<div class="modal-body">
		<p>Um parágrafo bem bacana para a modal. Pode ter uma pancada de coisas, tipo formulários.</p>
	</div>
	<div class="modal-footer">
		<a href="#" class="btn btn-primary">Salvar</a>
		<a href="#" class="btn" data-dismiss="modal" >Fechar</a>
	</div>
</div>

Utilização via atributos

Para ativar a modam manualmente, sem escrever javascript, defina um atributo data-toggle="modal" no elemento que ativará a modal, como um link, botão etc. Coloque também o atributo data-target="#nomeDaModal" ou href="#nomeDaModal" para especificar um target.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Chamando via Javascript

Para chamar a modal via Javascript

$('#nomeDaModal').modal(opções);

Opções

<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

Eventos