logo标签列表

如何使用Fancybox 2创建响应式弹出窗口？

javascriptjquerycssmobilefancybox-2
3
我使用fancy box2创建了一个简单的弹出框，在桌面站点上看起来很好。但是，当我在手机上看到这个弹出框时，它会被拉伸到手机屏幕大小，看起来很小。我需要在移动设备上打开页面时将其适应移动设备的显示屏。我该如何做呢？我需要与fancy box一起使用其他插件吗？还是可以通过JS/CSS实现？请给些建议... 演示 
<!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 声明进行拉伸。 - JFK
1个回答
2
在您的代码的<head>标签下添加以下内容：
<meta name="viewport" content="width=device-width, user-scalable=no">
如果您正在创建响应式网站，即适用于所有屏幕尺寸的网站，则此元标记应位于head部分。请将其放在head中以便我在演示中查看。 - XIMRX
但我没有设置任何宽度，如何使其适应显示器大小？ - Riffaz Starr
你想让表单变宽吗？还是其他什么需求。为此，将#popup的CSS设置为#popup{min-width: 300px;}。 - XIMRX
哈？在我的7英寸三星平板上可以滚动，在我的三星手机上却不能滚动，很奇怪。你在哪个手机上测试了一下？ - Riffaz Starr
机器从来不重要；在Chrome移动浏览器上检查。 - XIMRX
显示剩余6条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接