My eyes hurts from all the post I've read to try to answer this myself.

Long story short:
I want to be able to type "map" and get a pop up containing a, well.. map (not a quest map though, I mean a picture).
I have two problems at the moment:

1. I can't get it to work with an external URL (and I have to be able to do this because of the sheer amount of picture this will need).
2. I want it to popup 'over' the text in the game. Not in it.

Is this doable? Someone tell me to drop it and I will.

Should be doable, I think.

My first attempt would be a little javascript, something along the lines of:

SetFloatingImage = function (image) {
  var pane = $("#floatingImage");
  if (!pane.length) {
    pane = $("<img>", {id: "floatingImage"}).appendTo("#divOutput").css({position: "fixed", left: 100, top: 100, width: 200});
  }
  pane.attr("src", image);
};

Then in Quest you can do:

JS.SetFloatingImage("http://some.domain.com/some_image.png")

Of course, if you want to give the popup a title bar, a close widget, and let the player drag or resize it, those are all extra elements you need to add in. But none of them should be particularly difficult.

To add a JS file:

Click 'Add'

Click 'New' then 'Save'

Now you can enter JS into the field.

Add this to a JS file:

function showPopup(title, text) {
	$('#msgboxCaption').html(text);

	var msgboxOptions = {
		autoOpen: false,
		title: title,
		buttons: [
			{
				text: 'OK',
				click: function () { $(this).dialog('close'); }
			},
		],
		closeOnEscape: false,
	};

	$('#msgbox').dialog(msgboxOptions);
	$('#msgbox').dialog('open');
};

That will look like this:

Then in a Quest script (I'm putting this in a MAP command in this example):

src = "https://i.imgur.com/c5nBbAgb.png"
elem = "<img src='"+src+"'/>"
JS.showPopup("Map", elem)

If you want it to be fullscreen, add this one to your JS file:

function showPopupFullscreen(title, text) {
	$('#msgboxCaption').html(text);

	var msgboxOptions = {
		modal: true,
		autoOpen: false,
		title: title,
		width: $(window).width(),
		height: $(window).height(),
		buttons: [
			{
				text: 'OK',
				click: function () { $(this).dialog('close'); }
			},
		],
		closeOnEscape: false,
	};

	$('#msgbox').dialog(msgboxOptions);
	$('#msgbox').dialog('open');
};

Then change your Quest script to this (NOTE: You may need to add 'width:100%' to that inline CSS, depending on your image's size):

src = "https://i.imgur.com/c5nBbAgb.png"
elem = "<center><img style='max-width:100%;' src='"+src+"'/></center>"
JS.showPopupFullscreen ("Map", elem)

These functions will be included in the next release of Quest.

One extra function is here:

https://github.com/KVonGit/QuestStuff/wiki/Custom-Popups

javascript.js

function showPopup(title, text) {
	$('#msgboxCaption').html(text);

	var msgboxOptions = {
		modal: true,
		autoOpen: false,
		title: title,
		buttons: [
			{
				text: 'OK',
				click: function () { $(this).dialog('close'); }
			},
		],
		closeOnEscape: false,
	};

	$('#msgbox').dialog(msgboxOptions);
	$('#msgbox').dialog('open');
};


function showPopupFullscreen(title, text) {
	$('#msgboxCaption').html(text);

	var msgboxOptions = {
		modal: true,
		autoOpen: false,
		title: title,
		width: $(window).width(),
		height: $(window).height(),
		buttons: [
			{
				text: 'OK',
				click: function () { $(this).dialog('close'); }
			},
		],
		closeOnEscape: false,
	};

	$('#msgbox').dialog(msgboxOptions);
	$('#msgbox').dialog('open');
};

Example game file:

<!--Saved by Quest 5.7.6606.27193-->
<asl version="550">
  <include ref="English.aslx" />
  <include ref="Core.aslx" />
  <game name="External Image In Popup">
    <gameid>ab0fd9c2-b1de-4bf7-9f9e-e7fbae8c067b</gameid>
    <version>1.0</version>
    <firstpublished>2018</firstpublished>
  </game>
  <object name="room">
    <inherit name="editor_room" />
    <object name="player">
      <inherit name="editor_object" />
      <inherit name="editor_player" />
    </object>
  </object>
  <command name="map_cmd">
    <pattern>map;show map</pattern>
    <script><![CDATA[
      src = "https://i.imgur.com/c5nBbAgb.png"
      elem = "<center><img style='max-width:100%;' src='"+src+"'/></center>"
      JS.showPopupFullscreen ("Map", elem)
    ]]></script>
  </command>
  <javascript src="javascript.js" />
</asl>

MrAngel!
Thanks! It works exactly as I'd hoped it would!!!

Now I just need to see to those things supposedly none of witch "should be particularly difficult" :)

Woah, K.V., lots of interesting stuff. MrAngels thing worked really well, but I'll read and analyze your code and try to learn!
Thanks a lot, both of you!

Oh, I didn't even see mrangel's. Ha-ha! Yeah, that looks a little easier than the jQueryUI dialog popup!

The popup version is probably better if you want the title bar and everything … most of the code pre-built for you

Now I just need to see to those things supposedly none of witch "should be particularly difficult"

My first function (not the Fullscreen one) does these things 'out of the box', by the way:

title bar, a close widget, and let the player drag or resize it

Ha!

Hey, Cheese... You're sort of new. mrangel and I have this thing every once in a while. I call it 'simultaneous posting', due to lack of a better term.

Also note that when this happens, you should usually go with what mrangel says. (mrangel thinks like a coder. I just do what I can to make things work.)