Question

我想根据i框架高度和宽度修复模型框高度宽度。 i frame URL是我的本地域意味着模式框，i帧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

也许这会有所帮助。在模态窗口的css中，将顶部，左侧，底部和右侧设置为0.这将拉伸模型以填充其所在的框（只要它保持绝对，并且其容器设置为将保留的位置相对于它 - 绝对的或相对的。）

#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;
}

模态框高度宽度根据iframe的高度宽度进行修复

1 个答案: