search

niutech / showModalDialog

window.showModalDialog polyfill using a <dialog> element
https://niutech.github.io/showModalDialog/demo.html
Apache License 2.0
177 stars 88 forks source link

feat: multiple dialog, drag n' drop, new style #48

Open macmessa opened 5 years ago

macmessa commented 5 years ago

Adding:

function showMaximizedDialog(url, args) {
  // showModalDialog.interface
  var WindowParams = [
    'dialogLeft:0',
    'dialogTop:0',
    'dialogHeight:' + screen.availHeight + 'px',
    'dialogWidth:' + screen.availWidth + 'px'
  ].join(';');

  return window.showModalDialog(url, args, WindowParams);
DarkSide666 commented 4 years ago

I was waiting for such PR how years and finally found it !!! Thank you a LOT @macmessa ! This works perfectly.

Please add also this updated demo.html page (and remove demo-modal.html file) which shows how to use it and how nested dialogs work:

<!DOCTYPE html>
<html>
<head>
    <title>showModalDialog polyfill demo</title>
    <script src="showModalDialog.js"></script>
</head>
<body>
    <h1>showModalDialog polyfill demo</h1>
    <form action="">
        <p><input id="x" placeholder="Input number" /></p>
        <p><input id="button1" type="button" value="Show Modal Dialog using yield" /> <span id="result1"></span></p>
        <p><input id="button2" type="button" value="Show Modal Dialog using async/await" /> <span id="result2"></span></p>
        <p><input id="button3" type="button" value="Show Modal Dialog using eval" /> <span id="result3"></span></p>
        <p><input id="bt_close" type="button" value="Close dialog" /></p>
    </form>

    <hr />
    <p>Dialog received arguments: <b><span id="arg"></span></b></p>
    <script>
        x = document.getElementById('arg').innerHTML = window.dialogArguments;
        if (x) {
            window.returnValue = parseFloat(x) * parseFloat(x); // calc x^2 and return result
        }
    </script>

    <script>
        // close most recent dialog
        document.getElementById('bt_close').addEventListener('click', function() {
            window.close();
        });

        //using yield
        document.getElementById('button1').addEventListener('click', function() {
            spawn(function*() {
                var opt = "dialogWidth:500px;dialogHeight:350px";
                var ret = yield window.showModalDialog("demo.html", document.getElementById("x").value, opt);
                document.getElementById('result1').innerHTML = "Returned from modal: <b>" + ret + "</b>";
            });
        });

        //using async/await
        document.getElementById('button2').addEventListener('click', async function() {
            var opt = "dialogWidth:500px;dialogHeight:350px";
            var ret = await window.showModalDialog("demo.html", document.getElementById("x").value, opt);
            document.getElementById('result2').innerHTML = "Returned from modal: <b>" + ret + "</b>";
        });

        //using eval
        document.getElementById('button3').addEventListener('click', function() {
            var opt = "dialogWidth:500px;dialogHeight:350px";
            var ret = window.showModalDialog("demo.html", document.getElementById("x").value, opt);
            document.getElementById('result3').innerHTML = "Returned from modal: <b>" + ret + "</b>";
        });
    </script>
</body>
</html>
DarkSide666 commented 4 years ago

Doesn't work in Firefox at all

macmessa commented 4 years ago
  • Works perfectly in Chrome.
  • Edge works fine.
  • Internet Explorer 11 - only eval version works because others are not supported

Doesn't work in Firefox at all

ASAP I'll add the updates you suggested and take a look at this caller issue.

macmessa commented 4 years ago

I've accidentally closed the pull request.

DarkSide666 commented 4 years ago

Thanks! You will have to find the way around using deprecated Function.caller.

In a meantime I created my repo which I will use in one of my legacy projects because this repo is quite stale and PRs can sit there not merged for ages :( I was allowed to drop IE support in project and that way I could drop eval version which requires caller. Here is repo https://github.com/DarkSide666/showModalDialogMulti. Works flawlessly in all browsers except IE.