How to convert this "PROMPT" code to take input from an "IFRAME/POPUP" instead?

How to convert this "PROMPT" code to take input from an "IFRAME/POPUP" instead?

This is the js code:

u= prompt(" Enter a http:// image path ");
if( u.substring(0,3)=="htt" ){
text= "[image]" + u.trim() + "[/image]";
}
//update main webpage here using "text"

Code (markup):

Instead of asking user to type a URL of image, I was thinking of showing them a webpage, either in iframe or in popup, where they can select an image from a dropbox.
That will be much easier than typing URL...
I'll make the webpage, no problem there.

Problem is how to hault the javascript code until the iframe or popup returns the selected image?
Until an "ok" button is pressed in the iframe or popup window, the "if" block in above code is not executed.

In above code, the javascript execution is stopped automatically till "ok" button is clicked in the "prompt" box.

 

To go fast run it from the console. You can modify it whatever you want, in the first argument I have put an image but it can be any element that contains other elements, in button 0 I have added the option to execute a function in which it collects the value of box which is an input.value text type, but you can do what you want and how you want. Get the idea of grammar and its versatility, modify the buttons to your liking and how you want to put it wrong stylistically but that is up to you.

window["prompt"]=(...a)=>{
let object=a[0];

let prom=document.createElement("DIV");
prom.style="position:absolute;border:1px solid red;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);margin:0px;width:300px;height:200px";
prom.appendChild(object);
let mask=document.createElement("DIV");mask.style="position:absolute;top:0px;left:0px;bottom:0px;right:0px;background-color:white;opacity:.9;";document.body.appendChild(mask);


let button0=document.createElement("DIV");
button0.style="position:absolute;border:1px solid red;bottom:5px;left:5px;text-align:center;line-height:20px;padding:10px;cursor:pointer;";
button0.textContent="Accept";
prom.appendChild(button0);
let button1=document.createElement("DIV");
button1.style="position:absolute;border:1px solid red;bottom:5px;right:5px;text-align:center;line-height:20px;padding:10px;cursor:pointer;";
button1.textContent="Cancel";
prom.appendChild(button1);
let box=document.createElement("INPUT");box.type="text";
box.style="position:absolute;border:1px solid red;bottom:50px;width:90%;left:5%;right:5%;height:20px;padding:10px;";
prom.appendChild(box);
button1.onclick=(e)=>{prom.remove();mask.remove();};
button0.onclick=(e)=>{prom.remove();mask.remove();window[a[1]](box.value);};
prom.appendChild(button0);
document.body.appendChild(prom);
};

window["functionaction"]=(x)=>{alert(x);};
var elementobjecte=document.createElement("IMG");
elementobjecte.src="https://x.dpstatic.com/d/avatars/m/5/5997.jpg?1170735639";
prompt(elementobjecte,"functionaction");

Code (JavaScript):

 

I will try this and let you know.
My intention is not styling the prompt window though.
The idea is to load a webpage instead of prompt, and this webpage can have images which user previously uploaded (or from an image gallery) which user can now select.
Once the "accept" button is clicked, the image URL is sent back to main parent window, which does further processing of the URL, like shows the image in a certain IMG/DIV tag.

The list of URLs which that iframe page will show will be generated using PHP, either by scanning some directory, or pulled out of MySQL etc.

 

Oh okay I understand your question. I assume you know how to write HTML, CSS and JS well so I will give you a high level explanation on how to do it.

Forget about an IFRAME and Create a Modal. You can either use Bootstrap Modal or do it manually.

Then assign a click event to the OK button of the Modal. In the click event, you can perform the actions you wish to.

For example:

in your ok button, put

onclick="checkStr()"

Code (markup):

In js

function checkStr(){
//Get the value entered in the Modal Textbox
var u = document.getElementById("textBoxID").value;
if( u.substring(0,3)=="htt" ){
text= "[image]" + u.trim() + "[/image]";
}
}

Code (JavaScript):

 

Step 1: rip out ALL that JavaScript nonsense with the outdated iframe and prompt nonsense.

Step 2: make the page work without scripting FIRST by using a FORM.

Step 3: Enhance that form into a modal (which you might not need scripting to even do) and then use AJAX or other scripting to add/enhance/modify the already working page, WITHOUT any IFRAME junk.

Remember, good scripting practices should enhance an already working page, and not be your only means of adding functionality.

 

Hi @deathshadow
I am trying to add wyswyg capability to a textarea inside a form. There are couple of buttons I added above the form, like Bold Italic IMG etc.
Others are ok, people simply select text they want to BOLD/Italic etc, and then they click the button, its done.
Problem is with this IMG button.

Right now, when user clicks that button, a prompt opens, asking for URL of the image.
They give the URL and it gets inserted at current position in textarea.

That prompt part is what I wanted to change.
So instead of asking user to type an image URL, I show them a small webpage (iframe/popup) with available images (from directory, scanned using php).
They click on the image name they want, and image URL is sent to the same javascript which was taking input from "prompt".
My problem is only that part about haulting javascript until user has clicked an image name in the small webpage I opened for them.

An example is here:
https://vmapp.org/imageMake/

Near the top right corner there is a link which says "View Image Gallery".
When you will click it, a small iframe window opens, has images in it which user can switch between.
Finally they click a button, and URL of that image is sent back to the main page in input text field.
This one is different code, does not needs javascript to wait for input.

Now I wanted similar functionality on a wyswyg textarea.
When user clicks IMG button, their location in textarea etc is detected using JS,
Then JS asks for URL , waits here.
Then JS adds <img src="URL"> where JS detected cursor location in textarea.

 

Ok, so it's something that's justified as scripting-only enhancement, so that changes my answer slightly... but only slightly.

I still say don't use prompt, and don't use an iframe.

Have scripting make a modal (possibly at load?) so you can hash to it, trap onhashchange to check if it's the matching hatch as the modal and populate it when they click... either off an existing array PHP already sent with the document, or using AJAX to pull it as something like JSON. Put the IMG into BUTTON so that it's keyboard navigable, making sure they're set to type="button" so you don't have to Event.preventDefault(), and intercept their click to put it into your form.

Basic everyday UI stuff.

 

I will try this and will let you know.