Doubt when calling a modal jquery UI screen by passing an HTML page as parameter

Question

I have this code. At the click of lupa.gif, I would like to call a jquery function and play a page into it with all the parameters passed like this:

HTML:

<img id='' style='display:; cursor:hand' name='Pesquisa_Contrato' width='16' height='16' src='/gen/mid/lupa.gif' border='0' alt='Pesquisa Contrato' onClick="javascript:AbrePesquisa('/GEN/ASP/GEN0001a.asp?ind_situacao=&tipo_empresa=&ind_classificacao=&p_cod_tipo_contrato=&indsubmit=false&txt_nome_campo_cod=num_contrato&txt_nome_campo_cod_ts=cod_ts_contrato&txt_nome_campo_desc=nome_contrato&ind_tipo_pessoa=J&funcao_executar=PesquisaContratoMontaFilial();&abre_modal=S&ind_alteracao_contrato=&tipo_preco=','Pesquisa_Contrato','Pesquisa Contrato', 700, 500, 20, 15, 'S')">

Where is the javascript: AbrePesquisa(...), would like to call the jquery below and with all parameters passed, ie, run a page within a Modal JQuery:

<script>
  $(function() {
    $( "#dialog" ).dialog();
  });
  </script>

How would I do that? I have all the questions. All this in the image click lupa.gif

I was forgetting something extremely important. First, the site is lying in Classic ASP. Well, there are two files. One that we’ll call C1.Asp and another I call c1in.asp. well, in C1.Asp, I have a call to an Asp function. In c1in.Asp, I have the implementation of this function. This function does just this: Mount the HTML that has the magnifying glass and the search field, this here(c1in.Asp):

<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();">

            <img id='btnLupa' style='display:; cursor:hand' name='Pesquisa_Contrato' width='16' height='16' src='/gen/mid/lupa.gif' border='0' alt='Pesquisa Contrato' onClick="">
            <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" />
            <div id="painelModal"></div>
        </td>
    </tr>   

Only one as can be seen. And in C1.Asp is the call:

montaContrato()

I hope this helps.

Guys, that way it didn’t work:

function AbreModal(URL, name, title, width, height, top, left, replace) {
        $('#dialog').load(URL).dialog({
            modal: true,
            width: width,
            height: height,
            title: title
        });
    } 

The call

<img id='btnLupa' style='display:; cursor:hand' name='Pesquisa_Contrato' width='16' height='16' src='/gen/mid/lupa.gif' border='0' alt='Pesquisa Contrato' onClick="javascript:AbreModal('/GEN/ASP/GEN0001a.asp?ind_situacao=&tipo_empresa=&ind_classificacao=&p_cod_tipo_contrato=&indsubmit=false&txt_nome_campo_cod=num_contrato&txt_nome_campo_cod_ts=cod_ts_contrato&txt_nome_campo_desc=nome_contrato&ind_tipo_pessoa=J&funcao_executar=PesquisaContratoMontaFilial();&abre_modal=S&ind_alteracao_contrato=&tipo_preco=','Pesquisa_Contrato','Pesquisa Contrato', 700, 500, 20, 15, 'S')">

O(s) error(s) below:

In Chrome gives me this error:

Resource Interpreted as Stylesheet but transferred with MIME type text/html:

In IE, it pauses execution and these errors:

SCRIPT1028: Identifier, string or expected number

SCRIPT5007: The value of the property 'Open modal' is null or not defined; not a Function object

Answer 1

I believe that the Abrepesquisa method is just a wrap for window.open, so in your Avascript file there must be something similar to the following:

var AbrePesquisa = function (URL, name, title, width, height, top, left, replace) {
    replace = replace === 'S';
    var specs = "width=" + width + ", height=" + height + ", top=" + top + ", left=" + left;
    var janela = window.open(URL, name, specs, replace);
    janela.addEventListener('load', function () {
        janela.document.title = title;
    }, true);
}

then you can try to replace the method with the following:

var AbrePesquisa = function (URL, name, title, width, height, top, left, replace) {
    $( "#dialog" ).load(URL).dialog({
        modal: true,
        width: width,
        height: height,
        title: title    
    });
}

in this case, the name, top, left and replace properties would be kind of unused.

As AP mentioned, it is still struggling due to existing links (CSS, JS), so I’ll put an alternative using iframes:

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);
}

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

<link href="https://code.jquery.com/ui/1.11.3/themes/flick/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>

<button id="openModal" onclick='AbrirModal("http://www.javascriptkit.com", "Javascript Kit", 480, 360)'>  
    Abrir Modal
</button>

<iframe id="dialog" class="ui-helper-hidden">
</iframe>