Software Gerencial - Modal

Software Gerencial - Modal

by Angelo Rogério Rubin

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<input type="button" id="empresa" value="São Luis">
<div id="modal">
    <ul id="nomes"></ul>
</div>
<p>Lorem Ipsum</p>

CSS

body {
    font-family: Verdana;
    height: 100%;
}
#nomes li {
    font-size: 0.9rem;
    padding: 5px;
}
#empresa {
    background-color: black;
    color: white;
    border: none;
    padding: 5px 7px;
}
.ui-icon-closethick {
    background-image: url(http://download.jqueryui.com/themeroller/images/ui-icons_black_256x240.png) !important;
}
.ui-dialog-titlebar-close {
    border: none !important;
}
.ui-widget-overlay {
    /*
    background: black;
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
    */
}
.ui-corner-all {
    border-radius: 0 !important;
}
.ui-dialog-titlebar {
    border-radius: 0 !important;
    background: black !important;
    border: none;
    margin: 0;
}

.myCloseButton {
    width: 20px; 
    height: 20px;
    background-color: white;
}

JavaScript

// Ao clicar em #empresa abre a caixa de diálogo com as opções.
$(document).on('click', '#empresa', function(){
    // Limpa os nomes da caixa de dialogo que foram colocados na vez anterior.
    $('#nomes').empty();
    // Simulação de requisição ajax para pegar a lista de opções como se fosse pelo server-side.
    $.ajax({     
        type:"POST",
        url:"/echo/json/",
        data:{
            json: JSON.stringify(
                [
                    {'nome' : 'Matriz'},
                    {'nome' : 'Filial 1'},
                    {'nome' : 'Filial 2'}
                ]
            )
      },
      // Em caso de sucesso na resposta da requisição, colocamos os nomes dentro da lista não ordenada (com id #nomes)
      success:function(response) {
          $(response).each(function(i,v){
              $('#nomes').append('<li><a href="#">'+v.nome+'</a></li>');
          }); 
      }
    });
    // Abre a janela modal e configura as opções
    $('#modal').dialog({
        title: 'Opções',
        modal: true,
        draggable: false,
        // position: { my : 'center', at : 'center', of : window },
        open: function(event, ui) {
            $(".ui-dialog-titlebar-close", $(this).parent());
            var nomes =  $('#nomes');
            $('.ui-dialog-content').html(nomes);
            $(document).on('click', '#nomes li a', function(){
                $('#empresa').val($(this).text());
                $('#modal').dialog('close');
            });
            $('.ui-widget-overlay').on('click', function(){ 
                $("#modal").dialog('close');
            });
        }
    });
});