【问题标题】:Fancybox not stretching when using to display form用于显示表单时 Fancybox 不拉伸
【发布时间】:2015-10-07 06:43:46
【问题描述】:

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

【问题讨论】:

    标签: forms fancybox width inline


    【解决方案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 屏幕,看看表单宽度如何随着屏幕大小的变化而自行调整。

    【讨论】:

    • 谢谢老哥,问题解决了。 1个问题,不是恒定的间隔会减慢页面速度吗?我对 js 不太了解,但它似乎几乎一直在运行,对吧?
    • 不,它不会伤害网站,它只是在表单打开时执行,我什至在一个电子商务网站上使用它,页面至少有 12 个产品和每个产品盒动态调整它的高度,永远不会觉得页面加载缓慢或导致任何问题,如果您愿意,可以将延迟更改 setInterval(dimension, 100); 增加到此 setInterval(dimension, 500);
    • 哦,太好了。谢谢。等等,你把它用于产品盒子的高度吗?听起来很有趣。我一直在使用这个脚本 equalize.js 但我似乎无法找到一种方法来均衡每行。它只是从整个列表中取最高值并根据它调整所有内容。也许我可以从你的剧本中学到一些东西?
    猜你喜欢
    • 1970-01-01
    • 2019-11-08
    • 1970-01-01
    • 2018-11-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多