The dialog box is throwing an error when trying to open a dialog

trying to create a dialog box with iframe in it, i am getting an error

$("#dialogFrame").dialog({
    autoOpen: false, // Dialog is not shown on page load
    modal: true, // Make the dialog modal
    buttons: {
      "Close": function() {
        $(this).dialog("close");
      }
    }
 });

$(document).on('click', ".opendialog1", function(e) {
  e.preventDefault();
  var dialogHref = $(this).data('dialog-href');
  var cssFile = $(this).data('css');
  var dialogTitle = $(this).data('dialog-title') || 'View Details';
  var dialogWidth = $(this).data('dialog-width') || 600;
  var dialogHeight = $(this).data('dialog-height') || 600;

  // Set the dialog content
  $("#dialogFrame").html('<iframe id="myIframe" src="' + dialogHref + '" width="100%" height="100%" frameborder="0"></iframe>');

  // Update dialog options
  $("#dialogFrame").dialog("option", "width", dialogWidth);
  $("#dialogFrame").dialog("option", "height", dialogHeight);
  $("#dialogFrame").dialog("option", "title", dialogTitle);

  // Open the dialog
  $("#dialogFrame").dialog("open");

  // Handle the iframe's load event
  $("#myIframe").on("load", function() {
    if (cssFile) {
      var iframeDoc = this.contentDocument || this.contentWindow.document;
      var link = iframeDoc.createElement("link");
      link.rel = "stylesheet";
      link.href = cssFile;
      iframeDoc.head.appendChild(link);
    }
  });
});

with this code

<button name="updateGallery" id="updateGallery" data-load="iframe" data-dialog-href="uploadGallery.cfm?page=about&amp;ID=15" class="main-btn warning-btn btn-hover moss opendialog1" data-dialog-title="Upload Additional Images" data-dialog-width="800" data-dialog-height="800">Upload Gallery</button>

getting an error

Uncaught TypeError: i.getClientRects is not a function

which is pointing to this:
$(“#dialogFrame”).dialog(“option”, “width”, dialogWidth);