I need to replace showmodaldialog as ts no longer supported

Question

0.00/5 (No votes)

See more:

I have a legacy C# javascript app that I've been asked to look at as some of the behaviours are not working in Chrome. I found the culprit to be showModalDialog

Below is the javascript function that I need to fix.
I have read all sorts of advice but the examples are very basic and do not meet my needs. This is a modal pop up window that has 2 lists, you can click on arrows to select fields and move them to the right side and vice versa. I hope this makes sense.

Any assistance is appreciated.

function launchFieldList() {     
        var args = new Object();
        buildList();
        args["listFields"] = listFields;  
        var retVal = showModalDialog("selectFields.aspx",
                      args,
                      "dialogWidth:650px;dialogHeight:410px;status:no");       
        if (retVal != new String("CANCEL") && typeof (retVal) != "undefined")
        {
                fieldList = retVal;
        }
        updateDisableSelection();       
        buildList();        		   
}

What I have tried:

I tried replacing it with window.open and that does pop up a new page, but its not modal and has no data - the fields list has not been returned. This happens on IE and Chrome.

Posted 24-Aug-20 0:24am

Member 13980681

Updated 24-Aug-20 1:08am

Add a Solution

Comments

F-ES Sitecore 24-Aug-20 6:52am

You're probably going to have to use a js plug-in that lets you show a web page in a modal box, or completely refactor your code so it is compatible with more traditional js modal plug-ins which will involve the contents of your modal being on the same page as the parent page.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2020-08-24T01:08:00

The MDN documentation[^] has a link to a polyfill for this method:
GitHub - niutech/showModalDialog: window.showModalDialog polyfill using a <dialog> element[^]

Alternatively, rewrite your code using the <dialog> element[^].

Or use an in-page Javascript "modal" dialog - for example, Bootstrap[^] or jQuery UI[^].