根据iframe的高度宽度确定模态框的高度宽度

Question

I want to fix model box height width according to i frame height and width. i frame URL is my local domain means modal box and i frame URL is on same domain. I have tried but not get any relevant result. Here is fiddle URL.

http://jsfiddle.net/shagun_jsfiddle/KY49P/1/

HTML

<a id="howdy" href="#">Howdy</a>        
        <div id="overlay" style="display: none;"></div>
        <div id="modal" style="display: none;">
            <a id="close" href="#">close</a>
            <div>
                <div id="content">

<iframe src="http://fiddle.jshell.net/shagun_jsfiddle/XxuLb/show/" frameborder="0"  height="100%" width="100%"></iframe>                    
                </div>
            </div>          
        </div>

Css

* {
                margin:0; 
                padding:0;
            }

     #overlay {
                position:fixed; 
                top:0;
                left:0;
                width:100%;
                height:100%;
                background:#000;
                opacity:0.5;
                filter:alpha(opacity=50);
            }

            #modal {
                position:absolute;
                background:url(tint20.png) 0 0 repeat;
                background:rgba(0,0,0,0.2);
                border-radius:14px;
                padding:8px;
            }

            #content {
                border-radius:8px;
                background:#fff;
                padding:20px;
                width:550px;
            }

            #close {
                position:absolute;
                background:url(close.png) 0 0 no-repeat;
                width:24px;
                height:27px;
                display:block;
                text-indent:-9999px;
                top:-7px;
                right:-7px;
            }

jQuery

var modal = (function(){
                var method = {},
                    $overlay,
                    $modal,
                    $content,
                    $close;

                    $modal = $('#modal');
                    // Center the modal in the viewport
                    method.center = function () {
                        var top, left;

                        top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
                        left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;

                        $modal.css({
                            top:top + $(window).scrollTop(), 
                            left:left + $(window).scrollLeft()
                        });
                    };

                    // Open the modal
                    method.open = function (settings) {
                        //$content.empty().append(settings.content);
                        $modal = $('#modal');
                        $modal.css({
                            width: settings.width || 'auto', 
                            height: settings.height || 'auto'
                        });
                        $contentWd = $('#content').width(); //main content div width

                        //$('#iframe-box').css({
                            //height : $("iframe[id='iframe-box']").contents().find("html").height()
                        //});


                        $content_inWidth = $('#content').width();
                        $content_inHeight = $('#content').height();
                        $iframeWidth = $('.iframe').width();
                        $iframeHeight = $('.iframe').height();
                        //alert($content_inHeight);
                        if($content_inWidth > $iframeWidth){
                            //alert($content_inWidth);
                        }else{
                            //alert($iframeWidth);
                        }

                        method.center();
                        $(window).bind('resize.modal', method.center);
                        $modal.show();
                        $('#overlay').show();

                    };
                return method;
            }());



            // Wait until the DOM has loaded before querying the document
            $(document).ready(function(){
                $('a#howdy').click(function(e){
                    modal.open({});
                    e.preventDefault();
                });



                $('#close').click(function(e){
                    e.preventDefault();
                    $('#modal').hide();
                    $('#overlay').hide();

                });
            });

Answer 1

Maybe this will help. In the css for the modal window, set the top, left, bottom and right to 0. This will stretch the model to fill the box it is in (as long as it remains absolute, and its container set to something where it will remain relative to it - absolute, or relative.)

#modal {
    position:absolute;
    background:url(tint20.png) 0 0 repeat;
    background:rgba(0,0,0,0.2);
    border-radius:14px;
    padding:8px;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
}