showModalDialog Polyfill - Implementation

Hello prog.NET,

Did you used "Window.showModalDialog()" on your code? If that so, you must be have a problem with solution for implementation on other browsers except IE "Internet Explorer" because it was blocked or removed by dev browser;

example "Firefox" | "Chrome"
https://developer.mozilla.org/en-US/docs/Web/API/Window/showModalDialog

This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

This method was removed in Chrome 43 and Firefox 56.

Here'e i will give you another solution for that method.

When your web application using "Window.showModalDialog()" but it's not support for other browser an you did't want to changed, you can used showModalDialog Polyfill by niutech.
https://github.com/niutech/showModalDialog

showModalDialog Polyfill
This is a window.showModalDialog() shim using a modal HTML5 dialog element and ECMAScript 2015 Generators or ECMAScript 2017 Async/Await. It was tested in the latest Google Chrome and in the latest Mozilla Firefox with the dom.dialog_element.enabled preference set to true in about:config.


but code in that web doesn't completed for me, because i tested on Firefox the dialog position is not fixed and here'e i'm give the solution. I'm using ASP.NET for example;

CSS Code

dialog {
position: fixed;
top: 50%;
transform: translate(0, -50%);
}
.overlay{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background-color: rgba(0,0,0,0.5); /*dim the background*/
}

Project Interface

WebModalDialog-ASPNet

• Download Link
  

Remarks;
- showModalDialog Polyfill - Implementation
- showModalDialog Polyfill not working on firefox
- showModalDialog Polyfill dialog position
- Solution / alternative showModalDialog on firefox or chrome


Noted;

• The dialog tag defines a dialog box or subwindow.
• The dialog element makes it easy to create popup dialogs and modals on a web page.

Browser Support

Thankyou, i hope this article are helpful.
Remember for best solution is using Bootstrap.
https://getbootstrap.com/docs/4.0/components/modal/