用于显示表单时 Fancybox 不拉伸

Question

我想在 fancybox 叠加层中显示一个简单的表单，它在较小的屏幕上也能很好地工作。我在这里设置了一个例子http://design.imago.ee/test/fancybox-form/index1.html 最初我将表单宽度设置为 450 像素，屏幕尺寸为 620 像素，我将表单宽度设置为 100%，完成后，fancybox 窗口宽度折叠，表单无法正确显示。有趣的是，常规文本内容不会发生这种情况（示例中的第二个按钮）。我知道我可以使用媒体查询手动更改宽度，但这并不是一个很好的解决方案。任何人都可以帮忙吗？谢谢。

Answer 1

这不是一个非常优雅的解决方案，但会给你一个想法，并可能让你更接近你的目标

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

注意：调整 fiddle view 屏幕，看看表单宽度如何随着屏幕大小的变化而自行调整。