javascriptjquerygoogle-chromeshowmodaldialog

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.


Solution

  • 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