Open iframe using jquery dialog box

This is saying jQuery is not defined. Where are you including the jQuery library?

The solution requires jQuery to work - which needs to be included before your script.

You can add jQuery from here http://jquery.com

Or get on of the CDN's
Example: Google CDN (https://developers.google.com/speed/libraries/#jQuery)
Add this above your <script> tag and see if that works

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Select allOpen in new window

When I include that, nothing else shows on the page: https://www.compsure.net/test-for-popup/
The rest of the site is showing ok though luckily. That stumps me even more!

Firstly, apologies I did not see the link in the OP - that would have saved us some time.

From the source we can see that jQuery 1.12 is already included (line 73) (so you can remove the other version)
We can also see that your script occurs after line 73 - so that leaves us with the alias for jQuery.

If I type in a jQuery command in the console it works.

So, nothing to lead us to a solution.

Can you go back to the original script you had so we can see the error.

I removed the extra include of the jquery. (I tried changing the $ in the first line to jQuery also before I posted here, but it didn't help. That has worked for me in the past, but not here.)

You need to change all $ to jQuery - i.e.

jQuery(function () {
			jQuery("#dialog").dialog({
				autoOpen: false,
				resizable: false,
				width: "auto"
			});
			jQuery(".dialogify").on("click", function(e) {
				e.preventDefault();
				jQuery("#dialog").html("<img src='" + $(this).prop("href") + "' width='" + jQuery(this).attr("data-width") + "' height='" + jQuery(this).attr("data-height") + "'>");
				jQuery("#dialog").dialog("option", "position", {
					my: "center",
					at: "center",
					of: window
				});
				if (jQuery("#dialog").dialog("isOpen") == false) {
					jQuery("#dialog").dialog("open");
				}
			});
 });

Select allOpen in new window

It would seem that noConflict() is being called somewhere as the object jQuery is present on the page.

change your code to this:

jQuery(function ($) {
			$("#dialog").dialog({
				autoOpen: false,
				resizable: false,
				width: "auto"
			});
			$(".dialogify").on("click", function(e) {
				e.preventDefault();
				$("#dialog").html("<img src='" + $(this).prop("href") + "' width='" + $(this).attr("data-width") + "' height='" + $(this).attr("data-height") + "'>");
				$("#dialog").dialog("option", "position", {
					my: "center",
					at: "center",
					of: window
				});
				if ($("#dialog").dialog("isOpen") == false) {
					$("#dialog").dialog("open");
				}
			});
 });

Select allOpen in new window

http://jsbin.com/vukosep/edit?html,js,console

Julian got in just before me *grin*

You can keep the $, as it is passed as an argument to the jQuery init function

I still got the same error using jQuery at just the beginning. The error stopped using Julian's but I also had to add css to for block display on the image because it disappeared. But the dialog is still not opening, it goes to the page instead still.

I'm not seeing any errors now though to help further. This is a wordpress site, so would the line with .html in it have anything to do with it?
jQuery("#dialog").html - line 9

Please see this demo: http://jsbin.com/vukosep/edit?html,js,console  What's different with your code?

jQuery(function ($) {
  $("#dialog").dialog({
    autoOpen: false,
    resizable: false,
    width: "auto"
  });
  $(".dialogify").on("click", function(e) {
    e.preventDefault();
    $("#dialog").html("<img src='" + $(this).prop("href") + "' width='" + $(this).attr("data-width") + "' height='" + $(this).attr("data-height") + "'>");
    $("#dialog").dialog("option", "position", {
      my: "center",
      at: "center",
      of: window
    });
    if ($("#dialog").dialog("isOpen") == false) {
      $("#dialog").dialog("open");
    }
  });
});

Select allOpen in new window

This is a wordpress site, so would the line with .html in it have anything to do with it?

Nope, that looks fine.  Wordpress has jQuery call noConflict by default (for compatibility with other JS libraries).

LOL, Thanks Juilian. Crazy how the dumbest mistakes happen. After removing that line again, I found there was still one $ that needed changed to jQuery. That was the final error that I'd not been finding before.

The script is now working, I just need to make it look nice. Thanks a bunch.

You are welcome.