/* funciones del modal */
(function() {
'use strict';
var dialog = document.querySelector('#modal-example');
var closeButton = dialog.querySelector('#btn_cerrar');
var showButton = document.querySelector('#show-modal-example');
var saveButton = dialog.querySelector('#btn_guardar');
if (! dialog.showModal) {
dialogPolyfill.registerDialog(dialog);
}
var closeClickHandler = function(event) {
dialog.close();
};
var showClickHandler = function(event) {
dialog.showModal();
};
showButton.addEventListener('click', showClickHandler);
closeButton.addEventListener('click', closeClickHandler);
saveButton.addEventListener('click', closeClickHandler);
}());
/* obtener valores de los row de la tabla */
$(document).ready(function() {
$('#table-nopart tr').click(function() {
var href = $(this).find("a").attr("href");
if(href) {
window.location = href;
}
});
});
/* funcion para la seleccion de la tabla */
function selectElementContents(el) {
var body = document.body, range, sel;
if (document.createRange && window.getSelection) {
range = document.createRange();
sel = window.getSelection();
sel.removeAllRanges();
try {
range.selectNodeContents(el);
sel.addRange(range);
} catch (e) {
range.selectNode(el);
sel.addRange(range);
}
} else if (body.createTextRange) {
range = body.createTextRange();
range.moveToElementText(el);
range.select();
}
}
body {
padding-top: 20px;
padding-left: 20px;
box-sizing: border-box;
display: inline-block;
}
.mdl-dialog {
border: none;
box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
width: 90%;
height: 90%;
position:absolute;
height: fit-content;
}
.mdl-dialog::backdrop{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
}
.mdl-dialog__title {
padding: 24px 24px 0;
margin: 0;
font-size: 2.5rem;
}
.mdl-dialog__content{
overflow-y: auto;
'overflow:auto;
max-height: 100%;
}
.mdl-dialog__actions {
padding: 8px 8px 8px 24px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
.mdl-dialog__actions > * {
margin-right: 8px;
height: 36px;
}
.mdl-dialog__actions > *:first-child {
margin-right: 0;
'position: fixed;
}
.mdl-dialog__actions--full-width {
padding: 0 0 8px 0;
}
.mdl-dialog__actions--full-width > * {
height: 100%;
-webkit-flex: 0 0 100%;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
padding-right: 16px;
margin-right: 0;
text-align: right;
}
.mdl-dialog__content {
padding: 20px 24px 24px 24px;
color: rgba(0,0,0, 0.54);
}
.mdl-tabs__tab-bar{
width: 100%;
height: 100%;
}
'CSS de la tabla del modal
table#table-nopart {
border-collapse: collapse;
}
#table-nopart tr {
background-color: #eee;
border-top: 1px solid #fff;
}
#table-nopart tr:hover {
background-color: #ccc;
}
#table-nopart th {
background-color: #fff;
}
#table-nopart th, #example td {
padding: 3px 5px;
}
#table-nopart td:hover {
cursor: pointer;
}
#show-modal-example{
width: 100%;
height: 100%;
}
.mdl-card__supporting-text{
overflow: auto;
}
'CSS cel mdl grid
mdl-grid{
overflow:auto;
}
'CSS de los botones del modal y el form principal
#sample5{
width: 100%;
height: 100%;
}
#btnGuardar{
width: 100%;
}
'Tabs CSS config
.page-content{
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Primer formulario antes de motrar el Modal de config. -->
<div class="mdl-grid">
<div class="mdl-layout-spacer"></div>
<div class="mdl-cell mdl-cell--11-col">
<!-- Select cliente -->
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<select class="mdl-textfield__input" id="cleinte" name="cliente">
<option></option>
<option value="85">Lear Torres</option>
<option value="87">PKC</option>
<option value="89">Mahle</option>
<option value="91">Rane</option>
<option value="diesel">Diesel</option>
</select>
<label class="mdl-textfield__label" for="octane">Cliente:</label>
</div>
<!-- Select contacto -->
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<select class="mdl-textfield__input" id="cleinte" name="cliente">
<option></option>
<option value="85">Carlos Santana</option>
<option value="87">Flor Flores</option>
</select>
<label class="mdl-textfield__label" for="octane">Contacto:</label>
</div>
</div>
<div class="mdl-layout-spacer"></div>
</div>
<div class="mdl-grid">
<div class="mdl-layout-spacer"></div>
<div class="mdl-cell mdl-cell--11-col">
<!-- Select Tip. Ops. -->
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<select class="mdl-textfield__input" id="operacion" name="cliente">
<option></option>
<option value="hxh">Inspeccion</option>
<option value="cxm">Retrabajo</option>
</select>
<label class="mdl-textfield__label" for="operacion">Tipo de operacion:</label>
</div>
<!-- Select Moneda -->
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<select class="mdl-textfield__input" id="moneda" name="cliente">
<option></option>
<option value="mxn">Horas por horas</option>
<option value="usd">Costo minimo</option>
<option value="usd">Rate hora</option>
<option value="usd">Por pieza</option>
</select>
<label class="mdl-textfield__label" for="moneda">Tipo de pago:</label>
</div>
</div>
<div class="mdl-layout-spacer"></div>
</div>
<div class="mdl-grid">
<div class="mdl-layout-spacer"></div>
<div class="mdl-cell mdl-cell--11-col">
<!-- Select Moneda -->
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<select class="mdl-textfield__input" id="moneda" name="cliente">
<option></option>
<option value="mxn">MXN</option>
<option value="usd">USD</option>
</select>
<label class="mdl-textfield__label" for="moneda">Tipo de pago:</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="tpago">
<label class="mdl-textfield__label" for="tpago">Terminos de pago:</label>
</div>
</div>
<div class="mdl-layout-spacer"></div>
</div>
<div class="mdl-grid">
<div class="mdl-layout-spacer"></div>
<div class="mdl-cell mdl-cell--11-col ">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<textarea style="width:100%" class="mdl-textfield__input texto" type="text" rows= "3" id="sample5" ></textarea>
<label class="mdl-textfield__label" for="sample5">Descripcion de los terminos:</label>
</div>
</div>
<div class="mdl-layout-spacer"></div>
</div>
<!-- Termina el grid del formulario que se muestra primero -->
<div class="mdl-grid">
<div class="mdl-layout-spacer"></div>
<div class="mdl-cell mdl-cell--11-col ">
<button id="show-modal-example" type="button" class="mdl-button mdl-button--raised mdl-js-ripple-effect">Configurar cotizacion</button>
</div>
<div class="mdl-layout-spacer"></div>
</div>
<p>
<strong>NOTA: Algunas de las cotizaciones creadas solo podran ser modificadas por algun <em>Administrador (SysAdmin), gerente</em> o <em>Sub-Gerente.</em>
</p></strong>
<dialog class="mdl-dialog" id="modal-example">
<h7 class="mdl-dialog__title">Configurar cotizacion</h7>
<div class="mdl-dialog__content">
<form method="POST">
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-tabs__tab-bar">
<a href="#pay-details" class="mdl-tabs__tab is-active"><i class="material-icons">attach_money</i>Conseptos de pago</a>
<a href="#num-part" class="mdl-tabs__tab"><i class="material-icons">inbox</i>Numero de parte</a>
</div>
<div class="mdl-tabs__panel is-active" id="pay-details">
<div class="page-content">
<!-- Tab 1 form aqui -->
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--8-col">
<!-- Tabla para ver la lista de numeros de parte asignados -->
<div class="mdl-card__supporting-text">
<button onclick="selectElementContents( document.getElementById('table-nopart') );" type="button" class="mdl-button mdl-button--raised mdl-js-ripple-effect"><i class="material-icons">
file_copy
</i>Copiar texto</button>
<table id="table-nopart" class="mdl-data-table mdl-js-data-table mdl-shadow--1dp">
<tr>
<th class="mdl-data-table__cell--non-numeric">Nombre</th>
<th class="mdl-data-table__cell--non-numeric">Cantidad</th>
<th class="mdl-data-table__cell--non-numeric">Precio</th>
<th class="mdl-data-table__cell--non-numeric">Subtotal</th>
<th> </th>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Hrs. Supervisor</td>
<td class="mdl-data-table__cell--non-numeric">200 Hrs.</td>
<td class="mdl-data-table__cell--non-numeric">$45 MXN</td>
<td class="mdl-data-table__cell--non-numeric">$9,000 MXN</td>
<td><a href="N3843-3 seleccionado">Edit</a></td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Hrs. Inspector</td>
<td class="mdl-data-table__cell--non-numeric">600 Hrs.</td>
<td class="mdl-data-table__cell--non-numeric">$20 MXN</td>
<td class="mdl-data-table__cell--non-numeric">$12,000 MXN</td>
<td><a href="43254-655 seleccionado">Edit</a></td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Hrs. Inspector</td>
<td class="mdl-data-table__cell--non-numeric">600 Hrs.</td>
<td class="mdl-data-table__cell--non-numeric">$20 MXN</td>
<td class="mdl-data-table__cell--non-numeric">$12,000 MXN</td>
<td><a href="43254-655 seleccionado">Edit</a></td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Hrs. Inspector</td>
<td class="mdl-data-table__cell--non-numeric">600 Hrs.</td>
<td class="mdl-data-table__cell--non-numeric">$20 MXN</td>
<td class="mdl-data-table__cell--non-numeric">$12,000 MXN</td>
<td><a href="43254-655 seleccionado">Edit</a></td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Tiempo extra</td>
<td class="mdl-data-table__cell--non-numeric">12 Hrs.</td>
<td class="mdl-data-table__cell--non-numeric">$40 MXN</td>
<td class="mdl-data-table__cell--non-numeric">$480 MXN</td>
<td><a href="SVG-354 seleccionado">Edit</a></td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Costo por pieza</td>
<td class="mdl-data-table__cell--non-numeric">40,0000</td>
<td class="mdl-data-table__cell--non-numeric">$35 MXN</td>
<td class="mdl-data-table__cell--non-numeric">$1,400,000 MXN</td>
<td><a href="Costo x pz seleccionado">Edit</a></td>
</tr>
</table>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col">
<!-- Select cliente -->
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<select class="mdl-textfield__input" id="cleinte" name="cliente">
<option></option>
<option value="hi">Hrs. Inspector</option>
<option value="hs">Hrs. Supervisor</option>
<option value="te">Tiempo extra</option>
<option value="tm">Tiempo muerto</option>
<option value="cm">Costo minimo</option>
<option value="cxp">Costo por pieza</option>
<option value="trs">Transporte</option>
<option value="otr">Otro</option>
</select>
<label class="mdl-textfield__label" for="octane">Consepto:</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="txt_pz">
<label class="mdl-textfield__label" for="txt_pz">Nombre:</label>
<span class="mdl-textfield__error">No es un nombre valido</span>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" pattern="-?[0-9]*(\.[0-9]+)?" type="text" id="txt_pz">
<label class="mdl-textfield__label" for="txt_pz">Cantidad:</label>
<span class="mdl-textfield__error">Este campo es numerico</span>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" pattern="-?[0-9]*(\.[0-9]+)?" type="text" id="txt_pz">
<label class="mdl-textfield__label" for="txt_pz">Precio:</label>
<span class="mdl-textfield__error">Este campo es numerico</span>
</div>
<button id="btnGuardar" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-list__item-primary-action"><i class="material-icons">
save_alt
</i>Guardar</button>
</div>
</div>
</div>
</div>
<div class="mdl-tabs__panel" id="num-part">
<div class="mdl-grid">
</div>
</div>
</div>
<div class="mdl-dialog__actions">
<button id="btn_cerrar" type="button" class="mdl-button mdl-js-ripple-effect"><i class="material-icons">save_alt</i>Guardar</button>
<button id="btn_guardar" type="button" class="mdl-button mdl-js-ripple-effect"><i class="material-icons">close</i>Cerrar</button>
</div>
</form>
</div>
</dialog>