CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
HEEN
HEEN

Reputation: 4727

After alert for file uploading close the modal pop up

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.

Upvotes: 0

Views: 2257

Answers (4)

Ekta Aggarwal
Ekta Aggarwal

Reputation: 161

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');

Upvotes: 0

Sanil
Sanil

Reputation: 126

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();
}

Upvotes: 1

Manoj
Manoj

Reputation: 5071

Simply do this

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

OR

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

OR

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

Upvotes: 0

Maulana Prambadi
Maulana Prambadi

Reputation: 1041

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

Upvotes: 0

Related Questions