TelaSecundariaEmHtmlNoJS Page History

Tela Secundária em HTML5 no JavaScript

Imagem da tela secundária criada a partir do código apresentado abaixo: TelaSecundária

Código para criação de tela com caixas de texto, usando HTML5 dentro de uma função no JavaScript

chamarTela : function(num){
                var campos='';
                if(num==null){
                    campos='<div style = "margin-bottom:15px;">'+
                            '<label  for = "edit" > Nome: </label>'+
                            '<input   id="edit" /></div>'+
                            '<div style = "margin-bottom:15px;">'+
                            '<label  for = "edit2" > Identificador: </label>'+
                            '<input   id="edit2" /></div>'+
                            '<div style = "margin-bottom:15px;">'+
                            '<label  for = "edit3" > Tipo: </label>'+
                            '<input   id="edit3" /></div>';

                }else{
                    campos='<div style = "margin-bottom:15px;">'+
                            '<label  for = "edit" > Nome: </label>'+
                            '<input   id="edit" /></div>'+
                            '<div style = "margin-bottom:15px;">'+
                            '<label  for = "edit2" > Identificador: </label>'+
                            '<input   id="edit2" /></div>'+
                            '<div style = "margin-bottom:15px;">'+
                            '<label  for = "edit3" > Tipo: </label>'+
                            '<input   id="edit3" /></div>'+
                            '<div style = "margin-bottom:15px;">'+
                            '<label for = "edit4"  > No inicial: </label> <br>'+
                            '<input style="width: 250px;" id="edit4" type="text" value="'+num.split(";")[0]+'" />'+
                            '</div>'+
                            '<div style = "margin-bottom:15px;">'+
                            '<label for = "edit5"> No final: </label > <br>'+
                            '<input style="width: 250px;" id="edit5" type="text" value="'+num.split(";")[1]+'" />'+
                            '</div>';
                }

                var tela='<div class="modal-drag fade" id="telaCai" role="dialog"> '+
                    '<div class="modal-dialog modal-lgthematic" > '+
                        '<div class="modal-content"> '+
                            '<div class="modal-header">'+
                            '<button onClick="editor.deletarTela()"type="button" style = "float: right;" >&times;</button>'+
                              '<h5 class="modal-title" style = "float: left;"> Dados </h5>'+
                            '</div>'+
                            '<div class="modal-body"> '+
                            campos+
                             '</div> '+
                                '<div class="modal-footer"> '+
                                  '<button type="button" onClick="editor.printarEclipseTela()"  > salvar </button>'+
                                '</div> '+
                            '</div> '+
                        '</div> '+
                    '</div> '+
                '</div> ';
                $(tela).appendTo('body');
                $('#telaCai').show();
                $('#telaCai').draggable({
                handle: ".modal-header",
                cursor: "move"
                }); 
},
Last edited by José Maria Villac Pinheiro