如何使用 fancybox 2 创建响应式弹出窗口？答案

【问题标题】：How to create a responsive popup using fancybox 2?如何使用 fancybox 2 创建响应式弹出窗口？
【发布时间】：2014-07-14 13:46:21
【问题描述】：

我使用精美的 box2 创建了一个简单的弹出窗口。它在桌面网站上看起来不错。当我在手机上看到这个弹出窗口时，它都延伸到手机上，看起来很小。当我在移动设备上打开页面时，我需要显示它以适应移动显示。我怎样才能做到这一点？我想将任何其他插件与花哨的盒子一起使用，还是可以通过 JS/CSS 来实现？请提出建议...... demo

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="lib/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
    <link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />

    <script type="text/javascript">
        $("document").ready(function(){
            $("a.button").fancybox();
        });
    </script>

    <style>
        #popup { display: none; width: 100%;}
    </style>
</head>

<body>
    <div class="login_popup">
        <a class="button" href="#popup" >Login</a>
            <div id="popup">
                <a href="#" class="close">CLOSE</a>
                <form>
                    <P><span class="title">Username</span> <input name="" type="text" /></P>
                    <P><span class="title">Password</span> <input name="" type="password" /></P>
                    <P><input name="" type="button" value="Login" /></P>
                </form>
            </div>
    </div>
</body>
</html>

【问题讨论】：

尝试将autoSize 设置为false，这样它就会扩展到你的css声明的大小

标签： javascript jquery css mobile fancybox-2

【解决方案1】：

在代码的<head> 标签下添加：

<meta name="viewport" content="width=device-width, user-scalable=no">

【讨论】：

如果您正在创建响应式网站，即一个适用于所有屏幕尺寸的网站。那么这个元标记应该在 head 部分。把它放在头上，这样我就可以在演示中看到了。
在桌面上看不到窄，它是表单内容的大小。
但我没有设置任何宽度..如何显示适合显示尺寸？
你想让表格更宽吗？要不然是啥。对于#popup 的那组css，例如#popup{min-width: 300px;}
好的..它创建了一个垂直条..我们暂时离开它..但是当你在桌面上看到一个滚动条时，我在移动设备上看不到滚动条..我无法滚动它在移动设备上.. 但它在 ipad 中滚动而不显示滚动条.. 我怎样才能在移动设备上启用滚动... 我放了滚动：'是'.. 但似乎在移动设备上不起作用..