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

欲固定寬度根據I幀的高度和寬度模型箱的高度。我的框架URL是我的本地域意味着模式框和我框架URL是在同一個域。我試過但沒有得到任何相關結果。這裏是小提琴的URL。模態框高度寬度根據iframe的高度固定寬度

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(); 

       }); 
      });

來源

2013-09-25 Shagun Sood

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

來源

2013-09-25 13:09:50

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

回答

相關問題