How to do when a button is clicked, an element is created on the page?

Question

How to do when a button is clicked, an element is created on the page?

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

1

I need when a person clicks a particular button, an element is created on the page.

I'll explain what I want to do with this.

I am creating a button, and when it is clicked, a modal-box appears (a kind of window that lowers on the screen), and within this modal, I want to put some social widgets, like facebook, twitter, Google+, etc. But I need these widgets to load only when the person clicks the "share" button.

What I need is this.

A link that when clicked loads the modal content.

My code

Button:

<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>

Thank you in advance: D

javascript jquery

asked by anonymous 20.12.2014 / 03:13

3 answers

Radio button or button to sort data Capture variable image content

score 1 · Answer 1

There are several ways to do this. If you are using jQuery you can use methods like after () , before () , append () , prepend () , and so on ...

Here is an example usage:

// 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><ahref="#compartilhar" data-toggle="modal">Compartilhar</a>

score 1 · Answer 2

You can use .load() to load another HTML page within the modal, so you separate page content and reuse it in others.

The following example is triggered when the modal request is requested:

$('#compartilhar').on('show.bs.modal', function (event) {
    var modal = $(this)
    modal.find('.modal-title').text('Compartilhar')
    modal.find('.moda-body').load('compartilhar.html')
})

score 0 · Answer 3

There are two ways to do this, the first is by .append (), and you can put your HTML inside it!

The second is by .html (), you can create an HTML page with these widgets and give a .html () in your div by passing your HTML page as a parameter.

Follow the documentation links:
link
link