Skip to main content
adicionou 168 caracteres ao conteúdo
Fonte Link
waghcwb
  • 2mil
  • 1
  • 17
  • 29

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>

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:

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

$('a[href="#compartilhar"]').click(function(event) {

    event.preventDefault();

    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>

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>

Fonte Link
waghcwb
  • 2mil
  • 1
  • 17
  • 29

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:

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

$('a[href="#compartilhar"]').click(function(event) {

    event.preventDefault();

    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>