How to open .cfm page in JQuery dialog box?

Question

I have a link on my page where user can click and open another page. My current code open this page in another tab. So I would like that to be done in JQuery dialog box. User can click on the link and open the page without opening a new window. I already placed my div on the bottom of my current page and set the id to dialog. Here is my code:

<div>
    <a class="nav" href="procedure.cfm" target="_blank" style="color:red" onClick="verifyProcedure()">Procedure for use</a>
</div>

function verifyProcedure() {
    document.getElementById("submitForm").disabled = false;
    var contentUrl = 'procedure.cfm' 
    var dialog1 = $("<div>").dialog({
      autoOpen: false,
      modal: true,
      close: function (e, ui) { $(this).remove(); },
      buttons: { "Ok": function () { $(this).dialog("close"); } }
    });
    dialog1.load(contentUrl).dialog('open');
}

Code above doesn't work the way I want to. My page still gets open in new tab. I want dialog box to pop up on the same page with content of my procedure.cfm page. Can anyone help me how to get this to work? Thanks in advance.

Answer 1

从链接中删除href和目标

<a class="nav" href="javascript:void(0)" style="color:red" onClick="verifyProcedure()">Procedure for use</a>