After alert for file uploading close the modal pop up

Question

I have a scenario where I am uploading file using IFRAME. What I want is after succesfully uploading file, I want to close the modal pop up. But it is not working in my case. I tried like below

function CloseWindowFunction() {
        alert('PDF uploaded successfully');
        $('.modal-dialog').modal('toggle');
    }

Also see the html for the same

<div class="modal fade" id="dvFileUpload" tabindex="-1" role="dialog" aria-labelledby="dvFileUploadTitle" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">File Upload</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" data-keyboard="false">
                <iframe id="ifrmFileUpload" clientidmode="Static" runat="server" style="overflow: hidden; border: none" frameborder="0" scrolling="no"></iframe>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

So, how should I close that modal popup because my code is not working with toggle property.

Possible duplicate of [How to get twitter bootstrap modal to close (after initial launch)](https://stackoverflow.com/questions/10495421/how-to-get-twitter-bootstrap-modal-to-close-after-initial-launch) — Karan Desai, Aug 02 '17 at 06:18

score 1 · Answer 1 · answered Aug 02 '17 at 06:28

I think you are calling CloseWindowFunction() inside iframe. If so then, please create a function say hideModalPopup inside parent page:

function hideModalPopup(){
   $('.modal-dialog').modal('toggle'); 
   //OR - $('.modal-dialog').modal('hide');
}

Call the above function hideModalPopup() inside CloseWindowFunction() like this. CloseWindowFunction() Edited, check below.

function CloseWindowFunction() {
        alert('PDF uploaded successfully');
        window.parent.hideModalPopup();
}

Manoj · Answer 2 · 2017-08-02T06:20:21.307

0

Simply do this

$('#dvFileUpload').modal('hide');

OR

$("#dvFileUpload .close").click();

OR

$('#dvFileUpload').removeClass('show');

edited Aug 02 '17 at 06:20

answered Aug 02 '17 at 06:11

Manoj

4,951
2
30
56

where is `#modal` as ID in my html ? – Nad Aug 02 '17 at 06:13
Are you getting this alert `alert('PDF uploaded successfully');`? – Manoj Aug 02 '17 at 06:18
after alert when I click OK, nothing happens. I have to close the modal box – Nad Aug 02 '17 at 06:21
Ok check this in console `console.log($('#dvFileUpload'))`. Are you able to access this? – Manoj Aug 02 '17 at 06:23
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/150781/discussion-between-vvvv-and-manoj). – Nad Aug 02 '17 at 06:23

score 0 · Answer 3 · answered Aug 02 '17 at 06:11

0

maybe you can try with

function CloseWindowFunction() {
        alert('PDF uploaded successfully');
        $('#dvFileUpload').modal('hide');
    }

here for some reference for modal events https://getbootstrap.com/javascript/#modals-events

answered Aug 02 '17 at 06:11

Maulana Prambadi

1,015
9
7

score 0 · Answer 4 · answered Aug 02 '17 at 06:32

0

Try to add a class with the first div of modal for example:

<div class="modal fade test-modal" id="dvFileUpload" tabindex="-1" role="dialog" aria-labelledby="dvFileUploadTitle" aria-hidden="true" data-backdrop="static" data-keyboard="false">

and then call the

$('.test-modal').modal('hide');

answered Aug 02 '17 at 06:32

Ekta Aggarwal

161
6

i am using iframe, may be that's why it is not working – Nad Aug 02 '17 at 06:47

After alert for file uploading close the modal pop up

4 Answers4