Múltiplos Modais com Bootstrap

Neste objeto, é possível alterar os dados do modal através do clique do botão, onde são passados os elementos.

by Ivan Ferrer

HTML

<!-- Button trigger modal -->
   <button type="button" class="btn btn-primary btn-lg" data-id="1" data-toggle="modal" data-content="<h2>Título de exemplo 1</h2><p>Conteúdo feito dentro do modal 1</p>" data-title="Este título é o atributo 1" data-target="#element" data-button="mudar texto do botão salvar">
     Abrir Modal 1
   </button>
   <button type="button" class="btn btn-primary btn-lg" data-id="2" data-toggle="modal" data-content="<h2>Título de exemplo 2</h2><p>Conteúdo feito dentro do modal 2</p>" data-title="Este título é o atributo 2" data-target="#element" data-button="Muda o texto denovo">
     Abrir Modal 2
   </button>
   <button type="button" class="btn btn-primary btn-lg" data-id="3" data-toggle="modal" data-content="<h2>Título de exemplo 3</h2><p>Conteúdo feito dentro do modal 3</p>" data-title="Este título é o atributo 3" data-target="#element">
     Abrir Modal 3
   </button>
   <button type="button" class="btn btn-primary btn-lg" data-id="4" data-toggle="modal" data-content="<h2>Título de exemplo 4</h2><p>Conteúdo feito dentro do modal 4</p>" data-title="Este título é o atributo 4" data-target="#element">
     Abrir Modal 4
   </button>
   <button type="button" class="btn btn-primary btn-lg" data-id="5" data-toggle="modal" data-content="<h2>Título de exemplo 5</h2><p>Conteúdo feito dentro do modal 5</p>" data-title="Este título é o atributo 5" data-target="#element">
     Abrir Modal 5
   </button>
   <!-- Modal -->
   <div class="modal fade" id="element" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
           <h4 class="modal-title" id="myModalLabel">Modal title 1</h4>
         </div>
         <div class="modal-body">
             content entra aqui
         </div>
         <div...

JavaScript

$(document).ready(function() {
    
    $('#element').on('show.bs.modal', function(event) {
        $target = {};
        ['id','button','title','content'].forEach(function(value, key) {
            $target[value] = $(event.relatedTarget).data(value);
        });
     
       $(".new").addClass('hidden');
        $(".close-changes").text('Salvar').data('button');
        $(".modal-title").text($target.title);
        $(".modal-body").html($target.content);
        if ($target.id == 1 || $target.id == 2) {
            $(".close-changes").text($target.button);
        }
          if ($target.id == 3) {
            $(".new").removeClass('hidden');
        }
 });
});