Chrome 37 has stopped showmodaldialog support.What is use instead of that?

问题

My web application is crashed after launched of Chromenew version(37 and above),since chrome has stopped the support of showmodaldialog.However i need to implement same functionality in my web application.

I need some return value from popup same as showmodaldialog.I have designed all the popups page separately and called them from the parent page.

回答1:

Chrome started to support <dialog> element. Check this out. http://demo.agektmr.com/dialog/

Polyfill is available as well. https://github.com/GoogleChrome/dialog-polyfill

回答2:

After doing lots of googling , i have find out the solution of that issue.I am using Jquery dialog present in jquery-1.9.1 version.The implementation of given below:

Add jquery library on head tag of the parent page

<link type="text/css" rel="stylesheet" href="https://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

Write the popup opening function,where i am creating a div and inside the div take iframe like this

<script type="text/javascript" language="javascript">
 function Open() {

        var href = "../../PopUps/FindEmployee.aspx?Page=EC";
        var obj = $('<div id="divClose"></div>');

        obj.html('<iframe id="popUpFrame" style="border: 0px; " src="' + href + '" width="100%" height="99%"></iframe>');
        obj.dialog({
            autoOpen: false,
            resizable: false,
            height: 500,
            width: 650,
            modal: true,
            title: "Find Employee",
            dialogClass: 'infoDialogHeader infoDialogTitle'
        });
        obj.dialog('open');
        return false;
    }
 function closeIframe() {
        $('#divClose').dialog('destroy');
    }


</script>

Now I am working on child page which is FindEmployee.aspx like ths:

<script type="text/javascript" language="javascript">

    $(document).ready(function () {

        $("[id^=BtnReturnParentPage]").click(function (e) {
            var movedElement;

            if ($("#hdnInformationType").val() == "EC") { // condition for Employee Code                   
                movedElement = window.parent.$("[id*='txtECode']");
                // cleaning textbox
                movedElement.val('');
                movedElement.val($(this).parent().parent().find("[id^=gvEmployeeDetails_gvlblEmployeeCode]").text()); // assing relating information
            }

   window.parent.closeIframe();

        });

</script>

In above child page code , i have take value of $("[id*='txtECode']") textbox which is exist on parent page , and assign child page employee code value to parent page textbox.

So we need to create an element of textbox with name of txtECode on parent page so that assign the value of child page.

Hope it helps all the people who is struggling with window.showmodeldialog

回答3:

A simpler solution is this: instead of window.showmodaldialog, you can use window.open next to window.opener.client_function.

In this article by Peter A. Bromberg, it is very well explained: ASP.NET Popup Windows With Return Values Redux

"Less code, same operation"

来源：https://stackoverflow.com/questions/25882950/chrome-37-has-stopped-showmodaldialog-support-what-is-use-instead-of-that

标签

javascript

jquery

google-chrome

showmodaldialog