1

Preciso que quando uma pessoa clique em determinado botão, seja criado um elemento na página.

Vou explicar o que quero fazer com isso.

Estou criando um botão, e quando é clicado, aparece um modal-box (uma espécie de janelinha que abaixa na tela), e dentro desse modal, quero colocar alguns widgets sociais, como facebook, twitter, Google+, etc... Porém preciso que esses widgets sejam carregados somente quando a pessoa clicar nesse botão "compartilhar".

O que preciso é isso.

Um link que ao ser clicado, seja carregado o conteúdo do modal.

Meu código

Botão:

<a href="#compartilhar" data-toggle="modal">Compartilhar</a>

Modal:

<div id="compartilhar" class="modal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <span id="loginModalLabel">Compartilhe!</span>
</div>
<div class="modal-body">
    <!-- AQUI IRÁ FICAR O CONTEÚDO CARREGADO /-->
</div>
<div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancelar</button>
</div>
</div>

Obrigado desde já :D

2
  • "preciso que esses widgets sejam carregados somente quando a pessoa clicar nesse botão" <- porquê? esse modal não está escondido? ou est+a a usar o modal para conteudos diferentes?
    – Sergio
    Commented 20/12/2014 às 8:14
  • Exatamente, uso pra outras coisas também. Quero que seja carregado só quando clique porque carregado junto com a página pesa no carregamento. Obrigado por perguntar. Commented 20/12/2014 às 17:16

3 Respostas 3

1

Existem várias maneiras de se fazer isso. Se estiver usando jQuery pode usar métodos como after(), before(), append(), prepend(), e por ai vai...

Aqui vai um exemplo de uso:

// Conteúdo que deseja inserir
var oDiv = '<div class="modal">Conteúdo do modal</div>';

// Captura o evento de clique
$('a[href="#compartilhar"]').click(function(event) {

    // Previne que o link recarregue a página
	event.preventDefault();

    // Checa se a class modal existe
	if(!$('.modal').length) {
		
		// Se não existir, insere
		$(this).after(oDiv);
	}
	else {
		
		// Se existir da um fadeToggle();
		$('.modal').fadeToggle();
	}
	
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<a href="#compartilhar" data-toggle="modal">Compartilhar</a>

8
  • Não entendi muito bem como funciona seu exemplo. No caso var oDiv = '<div class="modal">Conteúdo do modal</div>'; será o conteúdo carregado? Commented 20/12/2014 às 3:48
  • Exatamente, ali você passa como string todo o conteúdo que deseja inserir no seu modal.
    – waghcwb
    Commented 20/12/2014 às 8:33
  • E onde o conteúdo vai aparecer? Ps: Não sou pro em jQuery. No caso tenho que criar uma <div> por exemplo, com a classe .modal? E ele irá aparecer nessa <div>? Commented 20/12/2014 às 17:01
  • No caso vou criar uma <div> com a classe conteudo-div e quero que ele apareça dentro dessa <div>. Commented 20/12/2014 às 17:05
  • Aqui está seu exemplo em um Fiddle: jsfiddle.net/291fo7sn caso queira fazer testes. Commented 20/12/2014 às 17:21
1

Você pode utilizar .load() para carregar uma outra página HTML dentro do modal, assim você separa o conteúdo da página e reutiliza em outras.

O exemplo a seguir é acionado quando for requisitado a abertura do modal:

$('#compartilhar').on('show.bs.modal', function (event) {
    var modal = $(this)
    modal.find('.modal-title').text('Compartilhar')
    modal.find('.moda-body').load('compartilhar.html')
})
1
  • 1
    Interessante... Vou testar :) Commented 20/12/2014 às 22:47
0

Existem dois jeitos de se fazer isso, o primeiro é pelo .append(), ae você pode colocar seu HTML dentro disso!

A segunda é pelo .html(), vc pode criar uma pagina HTML com esses widgets e dar um .html() na sua div passando sua pagina HTML como parametro.

Segue os links da documentação:
http://api.jquery.com/html/
http://api.jquery.com/append/

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 .