Question

I have upload image form implemented. When user click submit to upload image to server I display modal window with Jquery.BlockUI plugin. In that modal view I display iFrame with uploading information data.
Problem is when I add iFrame it displays fine, however it stays on body after closing modal view. I don’t know how to remove it from body?

$(function () {
            $("#Form").ajaxForm({
                iframe: true,
                dataType: "html",
                url: "/Images/Upload",
                target: "body",
                type: "POST",
                success: function (result) {
                    //$.unblockUI();
                    $('body.divAI').unblock();                    
                },
                beforeSubmit: function () {
                    $('body').append('<div id="divAI" style="cursor: default;"><div style="background-color: #404040; height: 23px;"><div style="width: 250px; text-align: left; padding-top: 3px;"><span style="font-weight: bold; color: White; padding: 3px; height: 23px; font-size: 10pt; text-align: left; font-family: Verdana;">Add Item</span></div></div><iframe id="ifAI" scrolling="no" height="200" width="425" src="Images/InFrame" frameborder="0"></iframe></div>');

                    $.blockUI({ message: $("#divAI"), css: {
                        width: '425px',
                        height: '225px',
                        left: ($(window).width() - 425) / 2 + 'px',
                        top: '10%'
                    }
                    });
                },
                error: function (response) {                    
                    $.unblockUI();
                }
            });
        });

Answer 1

Have you tried $("iframe").remove(); before closing the modal? You could also target the iframe by id if there are more iframe‘s on the page.