Veljko89 Veljko89 - 1 year ago 65
Javascript Question

Close modal before Response.Flush - C#

I have a problem with modal closing ...
So I have this button

that's inside of modal

<div id="Reporting_footer" class="modal-footer">
<asp:Button ID="btnReportingExport" runat="server" Text="Export"
CssClass="btn btn-default" OnClientClick="ChangeModalFunction();"
<input id="Submit1" class="btn btn-default" type="submit" data-dismiss="modal"
value="Cancel" />

That button first calls JS function
that looks like this

function ChangeModalFunction() {

So i just hide modal and show another modal that only has some
animation on it for generating the report. After that my main event happens
that does loads of stuff, taking data from SQL, putting it on excel, converting to PDF, zipping and putting it into response
It looks like this ...

Response.ContentType = "application/x-zip-compressed";
string.Format("attachment; filename=\"{0}.zip\"", QuestionnaireName));


So what I wish to accomplish, but failing miserably is to close the modal with a
on it, right before I flush my response ... and I got no clue how to do it anymore

ScriptManager.RegisterStartupScript(this, this.GetType(),
"CloseModal", "Closepopup();", true);


function is just simple function that does

function Closepopup() {

So after that long code trip, my problem shows up, I get download file dialog and my modal is still up and running in background. And I am all out of ideas how to fix it, how can I hide modal from code before doing the

Picture says 1000 of words - I just want to hide that modal behind before download dialog


Thank you for help and I apologize for wall of text

Answer Source

Interesting scenario, I would like you to try the following solution: call your zip file endpoint via ajax request using jquery (you can do it also with vanilla javascript). And then bind this event onreadystatechange to your request.

    var xhr  = $.ajax({url: "/",
     success: function(result){

    xhr.onreadystatechange = function() { 
        if(xhr.readyState === 4)

this event will fire with 5 different statuses:

  1. 0: request not initialized
  2. 1: server connection established
  3. 2: request received
  4. 3: processing request
  5. 4: request finished and response is ready

I believe that when you will get this status 4, the dialog will open in the same time and you could close your popup window.