Remove From My Forums

detect popup window from parent window (javascript)

Question
0

Sign in to vote
User-583959464 posted

i am starting a new project. i need to create a js to control the submit form.

click the button on submit form in parent window.
in submit form javascript before return of submit form function, i need to add a popup window (child window), there is a "Close" button.
the program will suspend until user click "Close" button in popup window. then the parent window need to detect the popup window close, once the popup window close, then it will continue submitform function going to return the form.

may i know how to prepare, any sample code for my reference.

function submitform(){

//validation checking

window.open(.., messageDialog, ''); //i want to popup a reminder message dialog, user need to click "Close" button once they read the message.

if (window.close){

return;

}

}
Monday, June 15, 2020 2:42 PM

All replies

0

Sign in to vote

User-474980206 posted

First it’s all async, so you need cancel the submit when you open the new window (though I’d use a modal library instead of a new window). As there is no close event, you code in the new window to notify its parent (window.opener) typically by calling code in the opener. Then this code starts the submit again.

this is easier with a bootstrap modal or similar, but it the same logic. Cancel submit, pop up resubmits on it’s close.

Monday, June 15, 2020 3:03 PM
0

Sign in to vote

User-583959464 posted

how about ajax or jQuery? can they do that?

for your suggestion, it need to call open.window when user clicks on button in the parent page. and then when user click "close" button on popup window. it call the submit form in parent page , right? any reference code for my reference? but i don't know how to control close button in popup window and then call submitform js in parent page.

Monday, June 15, 2020 4:01 PM

User288213138 posted

Hi 20141113,

click the button on submit form in parent window.
in submit form javascript before return of submit form function, i need to add a popup window (child window), there is a "Close" button.
the program will suspend until user click "Close" button in popup window. then the parent window need to detect the popup window close, once the popup window close, then it will continue submitform function going to return the form.

According to your description, i made demo for you as a reference.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
    <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
    <link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' media="screen" />
    <script type="text/javascript">
        $(function () {
            $("#btnShowPopup").click(function () {
                var title = "Greetings";
                var body = "Hello";

                $("#MyPopup .modal-title").html(title);
                $("#MyPopup .modal-body").html(body);
                $("#MyPopup").modal("show");
            });
            $("#btnClosePopup").click(function () {
                $("#MyPopup").modal("hide");
                //you will continue submitform function going to return the form
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
     <center>
    <input type="button" id="btnShowPopup" value="Show Popup" class="btn btn-info btn-lg" />
     </center>
        <!-- Modal Popup -->
        <div id="MyPopup" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"></button>
                        <h4 class="modal-title"></h4>
                    </div>
                    <div class="modal-body">
                    </div>
                    <div class="modal-footer">
                        <input type="button" id="btnClosePopup" value="Close" class="btn btn-danger" />
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

The result:

Best regards,

Sam

Tuesday, June 16, 2020 4:23 AM

0

Sign in to vote

User-583959464 posted

thanks Sam, but I want to call popup window in the submit form javascript , and how can I suspend the program until the user click close button, then it continue the program in submit form is.

my coding logic is as below

javascript section,

function submit_form() {

//coding to perform validation

if (validationequalTrue){

//popup window prompt

if (userClickButtononPopup){ //this coding trigger until user click button on popup window

//close the popup window

return; //end the submit_form

}

}

}

how to do that?

Tuesday, June 16, 2020 3:17 PM
0

Sign in to vote

User-474980206 posted

The window open and close is async, so you will have to combine both pop up and modal. To prevent input on the main window you will need to cover the page with modal with no buttons. The the close of the pop up window will call code in the main window to close the modal, and do the subsequent processing.

Tuesday, June 16, 2020 11:23 PM
0

Sign in to vote

User288213138 posted

Hi 20141113,

but I want to call popup window in the submit form javascript , and how can I suspend the program until the user click close button, then it continue the program in submit form is

Which of your functions can't be implemented?

Can you show me the code you try to code yourself?

Best regards,

Sam

Wednesday, June 17, 2020 6:25 AM
0

Sign in to vote

User-583959464 posted
I cant use the javascript with class attribute, how can I design attribute and assign into window.open(), you photo show the pop up window is exactly I want , but how can I use window.open ()to do that ?

Thursday, June 18, 2020 1:43 PM
0

Sign in to vote

User-583959464 posted
I cant use the javascript with class attribute, how can I design attribute and assign into window.open(), you photo show the pop up window is exactly I want , but how can I use window.open ()to do that ?

the problem is my project is embedded js library, and the elements cant add class attribute how can I create attribute in javascript section?or use the open.window to open pop up window?

Thursday, June 18, 2020 1:46 PM

User288213138 posted

Hi 20141113,

I cant use the javascript with class attribute, how can I design attribute and assign into window.open(), you photo show the pop up window is exactly I want , but how can I use window.open ()to do that ?

the problem is my project is embedded js library, and the elements cant add class attribute how can I create attribute in javascript section?or use the open.window to open pop up window?

According to your description, i made demo for you with the window.open() function.

<asp:Panel ID="pnlContents" runat="server" style="display:none">
                you can set the style in the panel<br />
                <asp:Button ID="Button1" runat="server" Text="close" OnClientClick="windowClose()" />
                <asp:Literal ID="Literal1" runat="server"></asp:Literal>
            </asp:Panel>
            <br />
            <asp:Button ID="btnPrint" runat="server" Text="open" OnClientClick="PrintPanel();" />

<script>
        function PrintPanel() {
            document.getElementById("<%=pnlContents.ClientID%>").style = "display: block";
            var panel = document.getElementById("<%=pnlContents.ClientID %>");     
            var printWindow = window.open('', '', 'height=400,width=800');
            printWindow.document.write('<html><head><title>This is title</title>');
            printWindow.document.write('</head><body>');
            printWindow.document.write(panel.innerHTML);
            printWindow.document.write('</body></html>');
            printWindow.document.close();
        }
    </script>

protected void Page_Load(object sender, EventArgs e)
        {         
            Literal1.Text = "<script>function windowClose() { window.close('', '_parent', '');}</script>";
        }

The result:

Best regards,

Sam

Friday, June 19, 2020 8:34 AM

0

Sign in to vote

User-583959464 posted
how can I control to popup window it only popup when first time visit the page, for revisit the page , popup window is set to hide.

Thursday, June 25, 2020 2:44 PM
0

Sign in to vote

User288213138 posted

Hi 20141113,

how can I control to popup window it only popup when first time visit the page, for revisit the page , popup window is set to hide.

This is another question, please post your question in the new thread.

Best regards,

Sam

Friday, June 26, 2020 8:12 AM

User-583959464 posted

Hi 20141113,

20141113

click the button on submit form in parent window.
in submit form javascript before return of submit form function, i need to add a popup window (child window), there is a "Close" button.
the program will suspend until user click "Close" button in popup window. then the parent window need to detect the popup window close, once the popup window close, then it will continue submitform function going to return the form.

According to your description, i made demo for you as a reference.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
    <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
    <link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' media="screen" />
    <script type="text/javascript">
        $(function () {
            $("#btnShowPopup").click(function () {
                var title = "Greetings";
                var body = "Hello";

                $("#MyPopup .modal-title").html(title);
                $("#MyPopup .modal-body").html(body);
                $("#MyPopup").modal("show");
            });
            $("#btnClosePopup").click(function () {
                $("#MyPopup").modal("hide");
                //you will continue submitform function going to return the form
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
     <center>
    <input type="button" id="btnShowPopup" value="Show Popup" class="btn btn-info btn-lg" />
     </center>
        <!-- Modal Popup -->
        <div id="MyPopup" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"></button>
                        <h4 class="modal-title"></h4>
                    </div>
                    <div class="modal-body">
                    </div>
                    <div class="modal-footer">
                        <input type="button" id="btnClosePopup" value="Close" class="btn btn-danger" />
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

The result:

Best regards,

Sam

Thanks. i can create a popup value. however, it is fine in the web browser like IE or chome. but when i using the mobile app, it is almost cover the whole screen. how can i control the screen in mobile app? or set the width percentage of the screen?

Sunday, July 12, 2020 5:50 AM

0

Sign in to vote
User288213138 posted

Hi 20141113,

Thanks. i can create a popup value. however, it is fine in the web browser like IE or chome. but when i using the mobile app, it is almost cover the whole screen. how can i control the screen in mobile app? or set the width percentage of the screen?

You can set the width by css, and you need to add the following code in the head.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Here a example for you as a reference:

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Best regards,

Sam
Monday, July 13, 2020 7:42 AM

Asked by:

detect popup window from parent window (javascript)

Question

All replies

20141113