window.showModalDialog is deprecated in Edge and Chrome

If you have a website being compatible with Edge/Chrome and in past it was only compatible with IE 11 and if you are using window.showModalDailog in your JavaScript code, then it will not work in modern browsers. Let’s check below its solution.

Below given sample JavaScript code that will not work because of showModalDailog in its code.

function openCalendar(oDate){
    if (typeof jQuery != 'undefined' && oDate instanceof jQuery) {
        var dateValue   = oDate.val();
        var color       = oDate.css('color');
    }else{
        var dateValue   = oDate.value;
        var color       = oDate.style.color;
    }

  var month     = "";
  var year      = "";

    if (dateValue != "" && color != "red") {
        month = dateValue.substring(3,5);
        year  = dateValue.substring(6,10);
    }
  search    = window.showModalDailog('../calendar/calendar.jsp?month='+month+'&year='+year ,null,'dialogWidth=220px;dialogHeight=220px;STATUS:NO;SCROLL:NO;help:no');

  if (search != null && search != "undefined" && search != "") {
        if (typeof jQuery != 'undefined' && oDate instanceof jQuery) {
            oDate.val(search);
            oDate.css('color', "");
        }
        else {
            oDate.value           = search;
            oDate.style.color   = "";
            oDate.className   = "InputText";
        }
  }
}

Solution:

As an alternative, we can try to use Window.Open() (for Edge and Chrome browsers). You can check below code it will definitely solve given issue.

function ShowInfoBox(message) {

        var ie = document.all;
        varl url = '../TestWeb/Error/ErrorMessages/PopInfoUI.aspx?val=' + message
 

        if(ie){
              window.showModalDialog(url, 'window', 'status:no; help:no; dialogWidth:400px; dialogHeight:120px');
             }       
       else {
            var theWin = window.open(url, 'New Window', 'width=400, height=120, status=no');
            theWin.focus();
           }
    }

Leave a Reply

Your email address will not be published. Required fields are marked *