簡體   English   中英

根據iframe的高度寬度確定模態框的高度寬度

[英]Modal box height width fix according to iframe's height width

我想根據i框架的高度和寬度來固定模型框的高度寬度。 i框架URL是我的本地域,表示模式框,而i框架URL在同一域中。 我已經嘗試過但沒有得到任何相關結果。 這是小提琴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();

                });
            });

也許這會有所幫助。 在模式窗口的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;
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM