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

Asked

Viewed 1,694 times

1

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

I’ll explain what I want to do with it.

I’m creating a button, and when it’s clicked, a modal-box (a kind of window that goes down on the screen), and within this modal, I want to put some social widgets such as facebook, twitter, Google+, etc... But I need these widgets to be loaded only when the person clicks on this "share button".

What I need is this.

A link that when clicked, the modal content is loaded.

My code

Knob:

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

Thanks in advance :D

javascript jquery

  • "need these widgets to be loaded only when the person clicks on that button" <- why? that modal is not hidden? or is+a using the modal for different contents?

  • Exactly, I use it for other things as well. I want it to be loaded only when click because loaded along with the page weighs in the load. Thanks for asking.

3 answers

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 of use:

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

  • I didn’t understand very well how your example works. In case var oDiv = '<div class="modal">Conteúdo do modal</div>'; will be content loaded?

  • Exactly, there you pass as string all the content you want to insert in your modal.

  • And where will the content appear? Ps: I am not pro in jQuery. In case I have to create a <div> for example, with the class .modal? And he’ll show up at this <div>?

  • In case I create a <div> with class conteudo-div and I want him to appear inside that <div>.

  • Here is your example in a Fiddle: http://jsfiddle.net/291fo7sn/ if you want to test.

  • In this case, the button is on the page, and the content is inside the modal. That is, when the person clicks, automatically opens the modal and loads the content inside.

  • Yes, exact. Just insert all the HTML that should appear in the modal into the "oDiv" variable. See example more elements: http://jsfiddle.net/Wagner/yyrs5so1. Just don’t forget that this HTML should be all in one line... You can use some HTML mini-scanner to do this if you need to.

  • I will test :) it seems to work.

Show 3 more comments

1

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

The following example is triggered when the modal opening 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')
})
  • 1

    Interesting... I’ll try it out :)

0

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 passing your HTML page as parameter.

Follow the links in the documentation:
http://api.jquery.com/html/
http://api.jquery.com/append/

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.