Web Modal Window Using IFrame

Introduction

IFrame modal window is a technique to show or open a popup on a web browser by keeping the flavor of a single page application so that the same instance of a page can be created on a single page using a new DOM of an IFrame.

Background

Sometimes the requirement is to show a dialog in separate document of a window. When an application needs to open the same instance window/modal with different data to show the user multiple times over a single web page, but the same element with the same ID cannot behave correctly if we use only a div based modal window, though those are very simple and straightforward.

After a lot of searching on the web, I got a few libraries to overcome the situation. But in a very simple way and if anyone does not want to implement a new single page application JavaScript library to his or her project, then it could be a workaround or an alternate solution to overcome the solution very easily.

Using the Code

The below example is to implement an IFrame and the generated URL has to be set to the IFrame's source. After that, the IFrame will be appended to a parent div element and then the div element will be shown.

Code

Let’s talk about the code. Code snippets are formatted using the .Code style, like so:

Parameters:

• url: URL of the IFrame to load the content of the window,
• width: modal width
• title: title of the window
• Id: id of the object
• Height: height of the browser

function OpenWindow (url, width, title, Id,_height) {

    var dialogHeight, dialogParentHeight, _parent, framename, currentIFrame; 
    dialogHeight = _height;
    framename = Math.floor((1 + Math.random()) * 0x10000)  .toString(16) .substring(1);
        currentIFrame =getFrameElement();
        if(currentIFrame != null) {
            _parent = $(currentIFrame).attr('id');
        }
        else
        {
            _parent= "";
        } 
      
        var iframe = $("<iframe _parentId='" + _parent + 
        "' name='" + framename + "' frameborder='0'           
        marginwidth='0' src='about:blank' marginheight='0' allowfullscreen></iframe>");
        iframe.attr("id",framename);
        iframe.attr("src",url);
        dialogHeight = dialogHeight - 10;
        $(iframe).css('height', dialogHeight);
        $(iframe).css('width',width);
        var iframeHolder = $('<div class="iframe-wrapper" 
        id="drg' + framename + '" />');
        var iframeInside = $('<div class="iframe-inside" />');
        var iframeTitle = '<div class="iframe-title">
        <div class="title-line">' + title + 
          '</div><div class="iframe-tools"><a href="javascript:void(0)"' + 
          'class="iframe-min"> </a> ' + 
          '<a href="javascript:void(0)" class="iframe-restore  disabled"></a>' + 
          ' <a href="javascript:void(0)"class="iframe-max"></a>'  +  
          '<a href="javascript:void(0)"  class="iframe-close"></a> </div></div>';
        iframeInside.prepend(iframeTitle);
        $(iframe).appendTo(iframeInside);
        iframeInside.appendTo(iframeHolder);
             var footer = $('#divRootFooter', top.document);
        if (footer.length>0) {
            iframeHolder.appendTo(footer);
            var drg = $(footer).find('#drg' + framename);
            drg.draggable({
                handle: $('#drg' + framename + ' .title-line')
            });
            $('#drg' + framename, window.parent.document).draggable
            ({handle:$('#drg' + framename + ' .title-line') });
        }
        else {
            iframeHolder.appendTo('footer');
            $('#drg' + framename).draggable({
                handle:
        $('#drg' + framename + ' .title-line')
            });
        }
    }
    function getFrameElement () {
         if (window.parent == null)
            return null;
        var iframes = parent.document.getElementsByTagName('iframe');
        for (var i = iframes.length; i-- > 0;) {
            var iframe = iframes[i];
            try
            {
                var idoc = 'contentDocument' in iframe ? 
                iframe.contentDocument : iframe.contentWindow.document;
            }
            catch (e) {
                continue;
            }
            if (idoc === document)
                return iframe;
        }
        return null;
    }

Let's consider that we are using an action of ASP.NET MVC. From the project it's a very straightforward system to return the partial view. The URL will look like “/testsite/home/id”.

ASP Code

public TestWindowController:Controller 
{ 
    public ActionResult GetPartialView() 
    { 
        return PartialView("partialview"); 
    }
} 

Accessing parent-child IFrame

Using this type of modal, we will have to have a mechanism to call a parent window function from the child window. Because of different DOMs, we have to handle this programmatically.

From parent page access Child page js methods

document.getElementById(‘iframeId').contentWindow.functionName(parameters…);

From IFrame page (child page) access parent page controls

function AccessParentPage(){
    var url = parent.document.referrer;
    var obj = parent.document;
    // this find can be used to find the control by id or by control type.
    // then we can use the control the way usually do with client side 
    //scripting
    $(obj).find('control name');
} 

From IFrame page (child page) access parent page js methods

This is pretty simple. You just need to add the parent keyword in the beginning to call methods in the parent page.

Example

If validate() was the method in the parent page, then simply call parent.validate() from the IFrame page.

From parent page access child page controls

var obj = document.getElementById('iframe id').contentWindow.document; 
$(obj).find('control name').each(function () { //your code }); 

Summary

You’ve learned how to use IFrame as a modal window to avoid collision of the same element that comes over a single page.