Fancybox没有拉伸时使用来显示表格

Question

我想在fancybox重叠显示一个简单的表单，这也适用于较小的屏幕上。我已经在这里设置了一个示例http://design.imago.ee/test/fancybox-form/index1.html 最初，我将窗体宽度设置为450px，在620px的屏幕尺寸下将窗体宽度设置为100％，并且在完成之后，fancybox窗口将宽度明智地折叠并且窗体不是正确显示。有趣的是，对于普通的文本内容（示例中的第二个按钮）不会发生。我知道我可以用媒体查询手动改变宽度，但它不是一个很好的解决方案。谁能帮忙？谢谢。

Answer 1

这不是很优雅的解决方案，但会给你一个想法，porbably让你更接近你的目标在的fancybox CSS

变化

.fancybox-inner { 
    overflow: hidden !important; 
} 

脚本

窗口的计算宽度和调整宽度为content，请使用setInterval，以便动态调整宽度的任何更改。

setInterval(dimension, 100); 

function dimension() { 
    $('.content').css('width', $(window).width() * 0.6); 
} 

演示

$(document).ready(function() { 
 
    $('.fancybox').fancybox({ 
 
     padding: 0, 
 
     helpers: { 
 
      overlay: { 
 
       locked: false 
 
      }, 
 
      title: { 
 
       type: 'inside' 
 
      } 
 
     } 
 
    }); 
 

 
    setInterval(dimension, 100); 
 

 
    function dimension() { 
 
     $('.content').css('width', $(window).width() * 0.6); 
 
    } 
 

 
});

.fancybox-inner { 
 
    overflow: hidden !important; 
 
} 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
/* =========================== Layout styles =================== */ 
 
body, html { 
 
    height: 100%; 
 
} 
 
body { 
 
    font: 14px/1.4'Open sans', sans-serif; 
 
    overflow: hidden; 
 
    background-color: #fff; 
 
    padding: 20px 4%; 
 
} 
 
.centered-wrap { 
 
    max-width: 1100px; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
} 
 
a.fancybox { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    background-color: #59a3d3; 
 
    color: #fff; 
 
    padding: 4px 7px; 
 
    border-radius: 2px; 
 
    text-decoration: none; 
 
} 
 
h1 { 
 
    font-size: 23px; 
 
    font-weight: 600; 
 
    margin-bottom: 15px; 
 
} 
 
p { 
 
    margin-bottom: 20px; 
 
} 
 
.content { 
 
    padding: 20px 30px; 
 
} 
 
input[type="text"] { 
 
    border: 1px solid #ccc; 
 
    height: 30px; 
 
    font: 13px/30px'Open sans', sans-serif; 
 
    box-sizing: border-box; 
 
    width: 100%; 
 
    padding: 0 7px; 
 
} 
 
#form { 
 
    width: 450px; 
 
    padding: 30px; 
 
} 
 
#form .row { 
 
    margin-bottom: 10px; 
 
} 
 
#form .col { 
 
    float: left; 
 
} 
 
#form .col1 { 
 
    width: 25%; 
 
} 
 
#form .col2 { 
 
    width: 75%; 
 
} 
 
#form label { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    padding: 6px 10px 0 0; 
 
} 
 
/* ======================= media queries ======================= */ 
 
@media screen and (max-width: 620px) { 
 
    #form { 
 
     width: 100%; 
 
     text-align: center; 
 
     padding: 5px; 
 
    } 
 
    #form .col { 
 
     float: none; 
 
     width: auto; 
 
     text-align: center; 
 
     margin-right: 10px 
 
    } 
 
    #form label { 
 
    } 
 
} 
 
/* ======================== clearfix =========================== */ 
 
/* Force Element To Self-Clear its Children */ 
 
.clearfix:after { 
 
    visibility: hidden; 
 
    display: block; 
 
    font-size: 0; 
 
    content:" "; 
 
    clear: both; 
 
    height: 0; 
 
} 
 
.clearfix { 
 
    display: inline-block; 
 
} 
 
/* start commented backslash hack \*/ 
 
* html .clearfix { 
 
    height: 1%; 
 
} 
 
.clearfix { 
 
    display: block; 
 
} 
 
/* close commented backslash hack */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" /> 
 
<div class="centered-wrap"> 
 
    <p><a class="fancybox" href="#form">Fancybox with form</a></p> 
 
    <div style="display: none;"> 
 
     <div id="form" class="content"> 
 
      <div class="row clearfix"> 
 
       <div class="col col1"> 
 
        <label>Form label</label> 
 
       </div> 
 
       <div class="col col2"> 
 
        <input type="text"> 
 
       </div> 
 
      </div> 
 
      <div class="row clearfix"> 
 
       <div class="col col1"> 
 
        <label>Form label</label> 
 
       </div> 
 
       <div class="col col2"> 
 
        <input type="text"> 
 
       </div> 
 
      </div> 
 
      <div class="row clearfix"> 
 
       <div class="col col1"> 
 
        <label>Form label</label> 
 
       </div> 
 
       <div class="col col2"> 
 
        <input type="text"> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Fiddle Example

注：调整拨弄视图屏幕上看到形式宽度如何调整本身与屏幕尺寸的变化。