JSFiddle - React, Tailwind, and code Playground

by Paulo Silva

HTML

<iframe id="dialog" class="ui-helper-hidden"></iframe>
    <tr>
        <td class="label_right" nowrap>Contrato&nbsp;</td>
        <td>
            <input type="text" name="num_contrato" value="" size="15" maxlength="17" tabindex="1" OnKeyPress="javascript:MascAlfaNum()" OnKeyDown="TeclaEnter()" onchange="PesquisaContratoMontaFilial();">
            <button id="openModal" onclick='AbrirModal("http://www.javascriptkit.com", "Javascript Kit", 480, 360)'>  
    Abrir Modal
</button>
            <input type="text"  name="nome_contrato" value="" size="50" tabindex="-1" Readonly class="camposblocks">
            <input type="hidden" name="cod_ts_contrato" value="">
            <input type="hidden" name="ind_tipo_pessoa" value="J" />
        </td>
    </tr>

CSS

.ui-dialog iframe {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px !important;
    border: 0px none black;
    width: 100% !important;
    height: 100%;    
}

JavaScript

var dialog = $("#dialog");
    var openModal = $("#openModal");

    dialog.dialog({
        modal: true,
        autoOpen: false,
    });

    dialog.load(function () {
        dialog.dialog("open");
    });

    var AbrirModal = function (url, title, width, height) {
        dialog.dialog("option", "width", width);
        dialog.dialog("option", "height", height);
        dialog.dialog("option", "title", title);
        dialog.attr("src", url);
    }