3

Existe uma maneira de juntar o modal do Bootstrap (qualquer versão) com o API History?

A lógica ficaria assim: Ao abrir o modal a URL na barra de navegação mudaria para exemplo.com/modal-aberto e ao fechar o modal a URL voltar ao que era.

Ainda não tenho códigos pois será para alguns projetos futuros.

Exemplo: http://poracaso.ocponline.com.br/ ( Abra um post qualquer da lista. )

2
  • 1
    Pergunta... por que motivo, razão ou circunstância tem que mudar a URL ao abrir a modal? 27/03/2014 às 11:41
  • Eu atualizei o post com um exemplo exato, confira amigo.
    – Raank
    28/03/2014 às 3:47

2 Respostas 2

3

Nunca usei Bootstrap antes, mas eu testei o código e funcionou direitinho:

$('#myModal').on('show.bs.modal', function() {
    window.history.pushState(null, null, "/modal-aberto");
});

$('#myModal').on('hidden.bs.modal', function() {
     window.history.replaceState(null, null, "/");
});

Lembre-se de alterar o seletor para selecionar o seu modal.

Editado: Tinha esquecido de remover o '/modal-aberto' ao fechar.

1
  • Isso será usado em projetos na plataforma Wordpress, vou testar ainda hoje, abraços e obrigado.
    – Raank
    28/03/2014 às 3:42
1

Bom, creio que montar um exemplo demandaria muito tempo, mas eu já fiz algo assim e posso te ajudar com a lógica.

Primeiro você precisa de qualquer forma de uma linguagem de servidor, no caso do PHP você terá que usar o .htaccess. Com ele você tem que criar uma regra que redirecione todas as URL's para o arquivo principal, pois se o usuário atualizar a página ou entrar com a URL manualmente, não sera considerado um pushState, por tanto vai redirecionar.

Depois disso você tem que criar uma função que leia a URL normalmento com os atributos de document.location. Essa função deve ler a URL e será responsável por executar cada ação referente a URL, como abrir um modal por exemplo.

Depois de criada a função, ela deve ser executada no carregamento da página e em cada troca de URL por pushState, para isso você pode chamar ela nos eventos window.onload e window.onpopstate.

Observação:

1 - Se o comportamento for melhor, você pode executar a chamada da função assim que o DOM estiver pronto ao envés de carregado.

2 - O pushState ao qual me referia é a função para alterar o URL se redirecionar a página.`

A lógica que usei foi essa.

3
  • Sim, essa lógica é boa, será usada para abrir postagens no Wordpress, isso simplifica/muda algo na sua lógica?
    – Raank
    28/03/2014 às 3:44
  • Muda apenas a questão de que você não precisa mexer no .htaccess, você pode usar query vars... Na documentação do Wordpress procure pela função add_rewrite_rule e por query vars, é uma forma de vocÊ adicionar parâmetros customizados na URL, assim você pode montar pelo functions.php regras específicas para sua necessidade. Basta um conhecimento minimo de expressões regulares. Estes links podem te ajudar: codex.wordpress.org/Rewrite_API/add_rewrite_rule e wordpress.org/support/topic/how-to-pass-value-in-wordpress-url 28/03/2014 às 11:29
  • Acredito que na verdade isso facilite muito! Query vars é uma forma bem simples de trabalhar com essa lógica, eu uso isso para criar navegações com history API para one pages em Wordpress. 28/03/2014 às 11:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .