How to make the screen below in modal.
Remembering that the boxes are multi-selectable, and how do I click the Associar > button to pass to the right column the values I selected on the left and vice versa when I click on < Desassociar ? It can be in jQuery or even JavaScript.
The whole process is very simple, you first need to have two select's with the multiple attribute and two buttons to perform the associations, all you will do is pick up the selected item and add it to the other select and then remove the option from the previous one !
In the bootstrap you can use form-control to give additional formatting.
var associar = $("#associar");
var desassociar = $("#desassociar");
var permissoes = $("#permissoes");
var minhasPermissoes = $("#minhasPermissoes");
associar.click(function() {
var selecionado = permissoes.find('option:selected');
minhasPermissoes.append('<option>' + selecionado.text() + '</option>');
selecionado.remove();
});
desassociar.click(function() {
var selecionado = minhasPermissoes.find('option:selected');
permissoes.append('<option>' + selecionado.text() + '</option>');
selecionado.remove();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><divclass="container">
<div class="row">
<div class="col-md-6">
<label>Permissões</label>
<select id="permissoes" class="form-control" multiple>
<option>Clientes</option>
<option>Boletos</option>
<option>Usuários</option>
<option>Configurações</option>
</select>
</div>
<div class="col-md-6">
<label>Minhas Permissões</label>
<select id="minhasPermissoes" class="form-control" multiple>
</select>
</div>
</div>
<br>
<button id="associar" class="btn btn-primary">Associar</button>
<button id="desassociar" class="btn btn-primary">Desassociar</button>
</div>See also working on jsfiddle
To add in a modal is very simple too, the bootstrap documentation itself has excellent examples of this.
See working with modal on jsfiddle
Documentation Bootstrap-Modal
You can also use a plugin that I developed, just include the pickList.js create a div and call $("#pickList").pickList();